/* =========================================================
   FASSIARA · Páginas internas de tratamientos
   ========================================================= */
.subpage .site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.sub-nav { display: flex; gap: var(--sp-1); }
.sub-nav a { padding: 8px 14px; border-radius: var(--r-pill); color: var(--text); text-decoration: none; font-size: var(--fs-2); font-weight: 600; }
.sub-nav a:hover { background: var(--coral-100); }
.btn-sm-md { min-height: 44px; padding: 10px 20px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-1); color: var(--text-muted); margin-bottom: var(--sp-4); }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--accent); }

.sub-hero {
  padding: clamp(48px, 7vw, 96px) 0;
  background:
    radial-gradient(60% 70% at 90% 10%, rgba(252, 231, 106, .22), transparent 60%),
    radial-gradient(60% 70% at 80% 90%, rgba(248, 186, 164, .4), transparent 65%), var(--bg);
}
.sub-hero.compact { padding-bottom: var(--sp-5); }
.sub-hero-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--sp-6); align-items: center; }
.sub-title { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 400; margin-bottom: var(--sp-4); }
.sub-hero .lead { max-width: 52ch; }
.sub-hero .hero-ctas { margin-bottom: 0; }
.sub-card {
  position: relative; overflow: hidden; color: var(--ink-900);
  border-radius: 56px var(--r-lg) 56px var(--r-lg); padding: var(--sp-5);
  background: radial-gradient(120% 90% at 15% 0%, #FBCDBB 0%, var(--brand-peach) 35%, var(--brand-coral) 100%);
  box-shadow: var(--shadow-3);
}
.sub-card img { position: absolute; right: 20px; top: 20px; height: 120px; width: auto; opacity: .5; }
.sub-card dl { margin: 0; display: grid; gap: var(--sp-3); position: relative; }
.sub-card dt { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; opacity: .75; }
.sub-card dd { margin: 2px 0 0; font-size: var(--fs-4); line-height: 1.3; }

.sub-section h2 { font-size: var(--fs-6); margin-bottom: var(--sp-4); }
.sub-section.alt { background: var(--surface); }
.sub-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }
.sub-cols + .container { margin-top: var(--sp-4); }
.sub-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
a.t-card { color: var(--text); text-decoration: none; }
a.t-card .t-more { margin: auto 0 0; }
.sub-groups { padding-bottom: var(--sp-8); }
.sub-group { margin-top: var(--sp-6); }
.sub-group h2 { font-size: var(--fs-5); margin-bottom: var(--sp-3); }
.sub-footer .footer-brand img { height: 110px; }

@media (max-width: 1080px) {
  .sub-nav { display: none; }
  .sub-hero-grid, .sub-cols { grid-template-columns: 1fr; gap: var(--sp-5); }
  .sub-related { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sub-related { grid-template-columns: 1fr; }
  .subpage .site-header .btn-sm-md { display: none; }
}
@media (min-width: 769px) { .subpage .mobile-cta { display: none; } }

/* ---------- Blog ---------- */
.container.narrow { max-width: 780px; }
.blog-meta { font-size: var(--fs-2); color: var(--text-muted); margin: 0; }
.blog-body { padding: var(--sp-5) var(--gutter) var(--sp-7); font-size: var(--fs-4); line-height: 1.75; }
.blog-body h2 { font-size: var(--fs-6); margin: var(--sp-6) 0 var(--sp-3); }
.blog-body ul { padding-left: 1.2em; margin: 0 0 var(--sp-4); }
.blog-body li { margin-bottom: 6px; }
.blog-body li::marker { color: var(--brand-coral); }
.blog-body strong { color: var(--text); }
.blog-cta { margin-top: var(--sp-6); padding: var(--sp-5); border-radius: 40px var(--r-lg) 40px var(--r-lg); background: var(--surface-alt); border: 1px solid var(--border); font-size: var(--fs-3); }
.blog-cta h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-5); }
.blog-card { position: relative; }
.blog-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-100); color: var(--gold-500); font-size: 18px; margin-bottom: var(--sp-3); }