/* ═══════════════════════════════════════════════════════
   CARMAY — equipo.css  ·  fichas de especialistas
   Complementa styles.css — no lo reemplaza
════════════════════════════════════════════════════════ */

/* ── PROFILE HERO ──────────────────────────────────── */
.ph {
  display: grid;
  grid-template-columns: 42% 1fr;
  min-height: 100vh;
  padding-top: var(--nav-h);
}
.ph-img {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}
.ph-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  /* Sustituir por foto real del/la especialista */
}
.ph-body {
  display: flex;
  flex-direction: column;
  padding: 3.5rem 5vw 5rem;
}
.ph-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wood);
  text-decoration: none;
  margin-bottom: auto;
  padding-top: 1rem;
  transition: gap .3s;
}
.ph-back:hover { gap: .8rem; }
.ph-eyebrow {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wood);
  margin-bottom: 1rem;
}
.ph-name {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.5vw, 4.8rem);
  font-weight: 300;
  line-height: 1.04;
  color: var(--ink);
  margin-bottom: 2.5rem;
}
.ph-quote {
  font-family: var(--serif);
  font-size: clamp(.95rem, 1.3vw, 1.18rem);
  font-style: italic;
  line-height: 1.65;
  color: var(--ink-2);
  border-left: 2px solid var(--wood);
  padding-left: 1.5rem;
  margin: 0;
  max-width: 44ch;
}

/* ── PROFILE ABOUT ─────────────────────────────────── */
.pa {
  padding: 7rem 0 8rem;
  background: var(--bg);
}
.pa-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 5rem;
  align-items: start;
}
.pa-main .tag { margin-bottom: 2rem; }
.pa-body {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink-2);
  margin-bottom: 1.8rem;
  max-width: 55ch;
}
.pa-body:first-of-type {
  font-size: 1.18rem;
  color: var(--ink);
  line-height: 1.7;
}

/* Sidebar credentials */
.pa-side {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}
.pa-cred-block {
  padding: 1.8rem 0;
  border-top: 1px solid var(--wood-pale);
}
.pa-cred-block:first-child { border-top: none; padding-top: 0; }
.pa-cred-title {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wood);
  margin-bottom: 1rem;
}
.pa-cred-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pa-cred-list li {
  position: relative;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-2);
  padding: .45rem 0 .45rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.pa-cred-list li:last-child { border-bottom: none; }
.pa-cred-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--wood);
  font-size: .75rem;
  top: .55rem;
}

/* ── PROFILE ÁREAS ─────────────────────────────────── */
.parea {
  padding: 6rem 0;
  background: var(--bg-2);
}
.parea-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--wood-pale);
  border: 1px solid var(--wood-pale);
  margin-top: 3rem;
}
.parea-item {
  background: var(--bg-2);
  padding: 2.2rem 2rem;
}
.parea-num {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wood);
  margin-bottom: .9rem;
}
.parea-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
}

/* ── PROFILE CTA ────────────────────────────────────── */
.pc {
  padding: 7rem 0;
  background: var(--bg-dark);
  text-align: center;
}
.pc-wrap { max-width: 540px; margin: 0 auto; }
.pc-eyebrow {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wood);
  margin-bottom: 1.5rem;
}
.pc h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 1.2rem;
}
.pc p {
  color: rgba(250,248,245,.5);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 3rem;
}
.btn-profile {
  display: inline-block;
  background: var(--wood);
  color: #fff;
  text-decoration: none;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1.1rem 2.8rem;
  transition: background .3s, transform .3s;
}
.btn-profile:hover { background: var(--wood-lt); transform: translateY(-2px); }
.pc-back {
  display: block;
  color: rgba(250,248,245,.3);
  text-decoration: none;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 2rem;
  transition: color .3s;
}
.pc-back:hover { color: rgba(250,248,245,.7); }

/* ── SPECIALTY TEAM SECTION ────────────────────────── */
.sp-team {
  padding: 5rem 0 4rem;
  background: var(--bg-2);
}
.sp-team .tag { margin-bottom: 1.5rem; }
.sp-team h2  { margin-bottom: 2.5rem; }
.sp-team .team-members {
  margin-top: 0;
  border-top: none;
  border-bottom: none;
  background: var(--wood-pale);
}
.sp-team .tm-card { background: var(--bg); }
.sp-team .tm-card:hover { background: #fff; }
.sp-team-intro {
  font-size: 1rem;
  color: var(--ink-3);
  max-width: 58ch;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.sp-pending {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.8rem 2rem;
  background: var(--bg);
  border: 1px dashed var(--wood-pale);
}
.sp-pending-icon {
  width: 64px;
  height: 80px;
  flex-shrink: 0;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--wood-pale);
}
.sp-pending-info .tm-dept { color: var(--wood); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.3rem; }
.sp-pending-info .tm-name { font-family: var(--serif); font-size: 1rem; color: var(--ink-3); font-style: italic; }

/* ── MOBILE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .pa-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .pa-side { position: static; }
  .parea-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .ph { grid-template-columns: 1fr; }
  .ph-img {
    position: relative;
    top: auto;
    height: 65vw;
  }
  .ph-body { padding: 2.5rem 1.5rem 4rem; }
  .ph-name { font-size: clamp(2rem, 8vw, 3rem); }
}
@media (max-width: 540px) {
  .parea-grid { grid-template-columns: 1fr; }
}