.professional { background: var(--white); padding-top: 5.5rem; }
.professional__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
}
.professional__intro {
  display: grid;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2rem;
}
.professional__portrait { max-width: 24rem; width: 100%; }
.professional__portrait img { display: block; width: 100%; height: auto; border-radius: var(--r-glass); }
.professional__identity h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; color: var(--ink); margin: 0 0 1rem; }
.professional__position { color: var(--purple-dark); font-size: clamp(1.1rem, 2vw, 1.4rem); margin: 0 0 .75rem; }
.professional__categories { color: var(--ink-soft); margin: 0 0 1.25rem; }
.professional a { color: var(--purple-dark); text-underline-offset: .2em; }
.professional__background { margin-top: clamp(2.5rem, 5vw, 4rem); }
.professional__background h2 { color: var(--ink); font-size: clamp(1.5rem, 3vw, 2rem); }
.professional__bio { color: var(--ink-soft); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.75; overflow-wrap: anywhere; }
.professional__bio p { margin: 0 0 1.25rem; white-space: pre-line; }
.professional__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.professional__actions .btn { color: var(--white); }
@media (min-width: 48rem) {
  .professional__intro { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
  .professional__intro--no-photo { grid-template-columns: 1fr; }
}

.professional .miga__l,
.professional .miga__l a,
.professional .miga__l [aria-current] { color: var(--ink-soft); }
.professional .miga__l li + li::before { background: var(--ink-soft); }
.professional .miga__l a:hover { color: var(--purple-dark); }
.professional-page .hdr::before { background: rgba(246, 244, 250, .92); }
.professional-page .brand__img--light { display: none; }
.professional-page .brand__img--dark { display: block; }
.professional-page .hdr .nav__link,
.professional-page .hdr .lang__btn { color: var(--ink); }
.professional-page .burger__bar { background: var(--ink); }

/* La trayectoria comparte el camino y la brújula de FIV. */
.professional__background.camino {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--r-glass);
  overflow: hidden;
}
.professional__background .camino__in { padding: 0 clamp(1.25rem, 3vw, 2rem); }
.professional__background .camino__t { margin-inline: auto; text-align: center; }
.professional__biography-text { white-space: pre-line; overflow-wrap: anywhere; }
.professional__background .via { max-width: none; }
.professional__background .camino__fondo { object-position: top center; }

/* La ficha ocupa todo el ancho; la identidad forma parte del camino. */
.professional > .professional__in:first-child { padding-bottom: 0; }
.professional__background.camino {
  width: 100%;
  margin-top: 0;
  border-radius: 0;
}
.professional__background .camino__in { padding-inline: clamp(1.25rem, 4vw, 3.5rem); }
.professional__path-heading { text-align: center; }
.professional__path-heading .professional__name { font-size: clamp(2rem, 5vw, 3.5rem); }
.professional__closing { padding-top: 0; }

.professional__background .camino__cuerpo { grid-template-columns: minmax(0, 1fr); }

/* El rostro dispone de su propia zona y la miga pertenece a la ficha. */
.professional__background .miga { margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.professional__background .professional__path-heading { margin-bottom: clamp(2rem, 5vh, 3rem); }
@media (min-width: 900px) {
  .professional__background .professional__path-heading,
  .professional__background .miga,
  .professional__background .via { max-width: 56%; }
  .professional__background .professional__path-heading { text-align: left; }
  .professional__background .professional__name { margin-inline: 0; text-align: left; }
  .professional__background .camino__fondo { width: 42%; object-fit: contain; object-position: right top; }
}

.professional__linkedin .red {
  width: 44px;
  height: 44px;
  margin-inline: auto;
  color: var(--purple-dark);
  background: rgba(255, 255, 255, .8);
  border-color: rgba(111, 81, 170, .3);
}
.professional__linkedin .red svg { stroke: currentColor; }
.professional__linkedin .red .red__pt { fill: currentColor; }
.professional__linkedin .red:hover { background: var(--purple-dark); color: var(--white); }
.professional__linkedin .red:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
@media (min-width: 900px) { .professional__linkedin .red { margin-inline: 0; } }

/* Lectura por bloques: el retrato ocupa todo el alto de la ficha. */
.professional__biography { color: var(--ink-soft); font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.7; }
.professional__block + .professional__block { margin-top: 1.5rem; }
.professional__block-title { margin: 0 0 .65rem; line-height: 1.15; }
.professional__biography-text { margin: 0; }
@media (min-width: 900px) {
  .professional__background .professional__biography { max-width: 56%; }
  .professional__background .camino__fondo {
    width: 42%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}
@media (max-width: 899px) {
  .professional__background { display: flex; flex-direction: column; }
  .professional__background .camino__in { order: 0; width: 100%; }
  .professional__background .camino__fondo {
    display: block;
    position: static;
    order: 1;
    width: 100%;
    height: auto;
    margin-top: 2rem;
    opacity: .85;
    mask-image: none;
    -webkit-mask-image: none;
  }
}
.anim .professional__biography { opacity: 0; transform: translateY(.8rem); transition: opacity .7s var(--ease) .2s, transform .7s var(--ease) .2s; }
.anim .professional__background.is-in .professional__biography { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .anim .professional__biography { opacity: 1; transform: none; transition: none; }
}

.professional__mobile-photo { display: none; }
@media (max-width: 899px) {
  .professional__background .camino__fondo { display: none; }
  .professional__mobile-photo {
    display: block;
    max-width: 24rem;
    width: 100%;
    margin: 0 auto 2rem;
    overflow: hidden;
    border-radius: var(--r-glass);
    border: 1px solid rgba(111, 81, 170, .16);
    background: var(--white);
    box-shadow: 0 18px 40px -28px rgba(0, 26, 50, .45);
  }
  .professional__mobile-photo img { display: block; width: 100%; height: auto; }
}

@media (min-width: 900px) { .professional__background .professional__actions { max-width: 56%; } }