/* ==========================================================================
   Equipo
   ==========================================================================
   Se carga después de site.css e interna.css. Hereda tokens, tipografía,
   grano, header, pie, flotantes y las entradas por [data-anim].

   Idea de la página: un directorio, no un folleto. Una ficha de tratamiento
   cuenta un procedimiento en línea recta —tapa, ficha, explica, camino—; esta
   página tiene que resolver otra cosa: quien la abre quiere ponerle cara a la
   persona con la que va a hablar, y saber qué hace cada una mientras él está
   en proceso. Por eso el peso está en la retícula de retratos y no en un hilo
   de etapas, y por eso cada persona lleva una frase de trabajo y no un
   currículum.

   El bloque con voz propia es `.reparto`: la única banda oscura del cuerpo,
   con los seis momentos de un proceso y quién está al frente en cada uno.
   Sirve para lo que el resto de la página no puede decir persona a persona:
   que el consultor está en los seis.

   Sin JavaScript propio. Las cinco áreas se recorren con anclas desde la
   tapa, y las entradas las dispara el observador que ya vive en site.js.

   Nombres de bloque comprobados contra site.css, interna.css, nosotros.css,
   app.css y mariana.css antes de bautizarlos. Ver docs/cascara-compartida.md.

   Móvil primero.
   ========================================================================== */


/* --- Tapa ----------------------------------------------------------------
   Fotografía de dos personas del equipo leyendo un estudio, muy bajada. Es la
   única imagen de la página que no es un retrato, y va al 40 % porque encima
   hay titular, entradilla y cinco enlaces: a plena carga el conjunto deja de
   leerse. Sin grano encima —la textura del sitio es para campos de color
   plano, nunca sobre una fotografía. */

.tapa--equipo { background: var(--navy); min-height: 74vh; }

.tapa--equipo .tapa__img {
  opacity: .4;
  object-position: top center;
}

.tapa--equipo .tapa__veil {
  background: linear-gradient(
    to top,
    rgba(0, 15, 28, .96) 0%,
    rgba(0, 15, 28, .8) 50%,
    rgba(0, 15, 28, .58) 100%);
}

.equipo__rej { display: grid; gap: clamp(1.5rem, 4vh, 2.25rem); }

.tapa--equipo .tapa__d { max-width: 48ch; }


/* --- Atajo a las áreas ---------------------------------------------------
   Trece personas en cinco grupos: quien busca al abogado no debería tener que
   recorrer a los trece. En móvil van en línea, envueltas, para no estirar la
   tapa; a partir de 900 px se enderezan en columna y ocupan la mitad derecha,
   que si no quedaría vacía. */

.salta__t {
  margin: 0 0 .75rem;
  font-size: .82rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .5);
}

.salta__l {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.salta__l a {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: rgba(255, 255, 255, .82);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .28);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.salta__l a:hover {
  color: var(--white);
  text-decoration-color: var(--apricot);
}


/* --- Cómo está armado ----------------------------------------------------
   La apertura. Dos párrafos y tres hechos en renglones con filete: nada de
   tarjetas con sombra, que es el tic que más delata una plantilla. Los tres
   hechos son comprobables uno por uno; si alguno se pudiera copiar al folleto
   de otro negocio, sobra. */

.armado { background: var(--white); }

.armado__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.armado__t {
  margin: 0 0 1.25rem;
  max-width: 18ch;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}

.armado__d {
  max-width: 68ch;
  margin: 0 0 1.05rem;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
}
.armado__d:last-child { margin-bottom: 0; }

.hechos {
  display: grid;
  gap: 0;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.hecho {
  padding: 1.3rem 0;
  border-top: 1px solid rgba(0, 26, 50, .13);
}
.hecho:last-child { border-bottom: 1px solid rgba(0, 26, 50, .13); }

.hecho__t {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}

.hecho__d {
  margin: 0;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}


/* --- La nómina -----------------------------------------------------------
   Fondo lavanda pálido: el bloque más largo de la página se separa del resto
   sin necesidad de otra banda oscura, y los retratos se apoyan sobre un color
   en vez de flotar en blanco. */

.nomina { background: var(--pale); }

.nomina__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.5rem);
}

.nomina__head { margin-bottom: clamp(2rem, 5vh, 2.75rem); }

.nomina__t {
  margin: 0 0 .8rem;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}

.nomina__d {
  max-width: 66ch;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}


/* --- Un área -------------------------------------------------------------
   El nombre del área no es decoración: es lo que orienta cuando ya llevas
   ocho caras leídas. En escritorio se queda pegado a la izquierda mientras
   pasan sus personas, así que en cualquier punto del recorrido sabes en qué
   grupo estás sin volver a subir.

   `scroll-margin-top` porque el header es fijo: sin él, el ancla de la tapa
   deja el título del área debajo de la barra. */

.area {
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid rgba(0, 26, 50, .14);
  scroll-margin-top: 5.5rem;
}
.area + .area { margin-top: clamp(2.5rem, 6vh, 4rem); }

.area__cab { margin-bottom: clamp(1.5rem, 3.5vh, 2rem); }

.area__t {
  margin: 0 0 .5rem;
  font-size: clamp(1.3rem, 3.4vw, 1.65rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--ink);
}

.area__d {
  max-width: 48ch;
  margin: 0;
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.area__l {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}


/* --- Una persona ---------------------------------------------------------
   En móvil el retrato va al lado y no encima: con el recorte 4/5 a ancho
   completo, cada persona ocuparía una pantalla entera y trece personas serían
   trece pantallas. A partir de 660 px el retrato sube y manda, que es como
   debe verse una cara.

   Mismo recorte para las trece —4/5, anclado arriba— y el mismo revelado
   suave encima. Las fotografías de banco vienen de trece sesiones distintas;
   ese lavado frío y la bajada de saturación las acercan lo suficiente para
   que la retícula se lea como un solo equipo. Cuando lleguen los retratos de
   verdad, hechos todos el mismo día, el tratamiento se puede quitar.
   Ver ../prompts-imagenes/08-equipo-retratos.md. */

/* En móvil el retrato y la identidad van uno al lado del otro, y la frase de
   trabajo cruza los dos renglones por debajo. Puesta en la columna estrecha de
   la derecha se partía en ocho líneas de cuatro palabras, que no es una medida
   de lectura; y con el retrato al lado de todo el bloque, la foto quedaba
   flotando arriba con medio renglón de aire debajo. */
.per {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: .2rem 1.1rem;
  align-items: start;
}
.per__foto { grid-column: 1; grid-row: 1; }
.per__c    { grid-column: 2; grid-row: 1; }
.per__d    { grid-column: 1 / -1; grid-row: 2; }

.per__foto {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-glass);
  background: var(--navy);
}
.per__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 26, 50, .08);
  pointer-events: none;
}

.per__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  filter: saturate(.9) contrast(1.03);
}

.per__n {
  margin: 0 0 .1rem;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--ink);
}

.per__cargo {
  margin: 0 0 .5rem;
  font-size: .95rem;
  font-weight: 400;
  color: var(--purple-dark);
}

/* La credencial es dato, no titular: pequeña, debajo del cargo. */
.per__cred {
  margin: 0;
  font-size: .8rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Un filete separa quién es de qué hace. Es la línea que importa de la ficha:
   arriba la identidad, abajo el trabajo. */
.per__d {
  margin: .85rem 0 0;
  padding-top: .85rem;
  border-top: 1px solid rgba(0, 26, 50, .13);
  font-size: .97rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}


/* --- Cómo se reparten el trabajo -----------------------------------------
   La única banda oscura del cuerpo, y va aquí por una razón: es lo que la
   retícula de retratos no puede decir persona a persona. Seis momentos y las
   áreas que están al frente en cada uno; sin números, porque el hilo numerado
   de las fichas de tratamiento ya existe y esto no es lo mismo.

   La línea albaricoque del final es el remate: en los seis está el consultor. */

.reparto {
  position: relative;
  padding: clamp(3.5rem, 9vh, 6rem) 0;
  background: var(--navy);
  color: var(--white);
}
.reparto::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: .16;
  pointer-events: none;
}

.reparto__in {
  position: relative;
  max-width: var(--medida);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
}

.reparto__head { margin-bottom: clamp(2rem, 5vh, 3rem); }

.reparto__t {
  margin: 0 0 .8rem;
  max-width: 20ch;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.reparto__d {
  max-width: 70ch;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, .65);
}

.relevo { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.relevo__p {
  display: grid;
  gap: .85rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.relevo__p:first-child { border-top: 1px solid rgba(255, 255, 255, .1); }

.relevo__t {
  margin: 0 0 .3rem;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -.022em;
}

.relevo__d {
  max-width: 60ch;
  margin: 0;
  font-size: .97rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, .62);
}

/* Un filete corto delante de cada área, no una viñeta ni una cadena de puntos
   medios. */
.relevo__q {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.relevo__q li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: -.008em;
  color: var(--apricot);
}
.relevo__q li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 1px;
  background: var(--apricot);
}

.relevo__hilo {
  max-width: 46ch;
  margin: clamp(1.75rem, 4vh, 2.5rem) 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--apricot);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--white);
}


/* --- Con quién empiezas --------------------------------------------------
   Cierre en lavanda pálido y no en otra banda oscura: el reparto acaba de
   terminar en navy y dos oscuros seguidos se leen como un solo bloque
   larguísimo. */

.arranque {
  background: var(--pale);
  border-top: 1px solid rgba(0, 26, 50, .1);
}

.arranque__in {
  max-width: var(--medida);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 4vw, 3.5rem);
}

.arranque__t {
  margin: 0 0 .8rem;
  max-width: 16ch;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}

.arranque__d {
  max-width: 56ch;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
}

.arranque__fin {
  display: grid;
  justify-items: start;
  gap: 1rem;
  margin-top: clamp(1.75rem, 4vh, 2.25rem);
}

.arranque__nota {
  max-width: 46ch;
  margin: 0;
  font-size: .95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}
.arranque__nota a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(111, 81, 170, .38);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.arranque__nota a:hover { color: var(--purple); text-decoration-color: var(--purple); }


/* ==========================================================================
   De 560 px en adelante
   ========================================================================== */

@media (min-width: 560px) {
  .per { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.35rem; }
}


/* ==========================================================================
   De 660 px en adelante — el retrato manda
   ========================================================================== */

@media (min-width: 660px) {
  .hechos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3.5vw, 2.75rem);
  }
  .hecho { border-bottom: 0; }
  .hecho:last-child { border-bottom: 0; }

  .area__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* De aquí en adelante el retrato va encima y a ancho de celda. Es la
     diferencia entre un listado y una página de equipo. */
  .per {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    align-content: start;
  }
  .per__foto,
  .per__c,
  .per__d { grid-column: auto; grid-row: auto; }
  .per__d { margin-top: 0; }

  /* Dos renglones de alto fijo para la credencial: unas caben en una línea y
     otras en dos, y sin esto el filete que separa identidad de trabajo sube y
     baja de una persona a otra. La retícula deja de leerse como una retícula. */
  .per__cred { min-height: 2.32rem; }
}


/* ==========================================================================
   De 900 px en adelante
   ========================================================================== */

@media (min-width: 900px) {
  /* Los atajos se alinean con el pie del titular: la tapa termina en una
     línea horizontal y no en una escalera. */
  .equipo__rej {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: end;
  }

  .salta__t {
    margin-bottom: .9rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
  }
  .salta__l { display: grid; gap: 0; }
  .salta__l a {
    padding: .62rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    text-decoration: none;
    transition: color .25s var(--ease), padding-left .3s var(--ease);
  }
  .salta__l a:hover { padding-left: .4rem; }

  /* El momento a la izquierda y las áreas a la derecha, alineados por la
     primera línea de texto: la columna de la derecha se lee de un barrido. */
  .relevo__p {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }

  /* Titular y texto a la izquierda, botón abajo a la derecha. Filas
     explícitas: sin ellas, un tramo `1 / -1` se colapsa a la primera fila y
     abre un hueco. */
  .arranque__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    grid-template-rows: auto auto;
    gap: .8rem clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
  .arranque__t   { grid-area: 1 / 1; }
  .arranque__d   { grid-area: 2 / 1; }
  .arranque__fin { grid-area: 1 / 2 / 3 / 3; align-self: end; margin-top: 0; }
}


/* ==========================================================================
   De 1040 px en adelante — el área se queda quieta
   ========================================================================== */

@media (min-width: 1040px) {
  .area {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .area__cab {
    position: sticky;
    top: calc(68px + 2rem);
    margin-bottom: 0;
  }

  .area__l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   Entradas
   ==========================================================================
   La clase `.anim` la pone site.js: sin JavaScript no hay estado "antes" y la
   página se ve entera. Los titulares suben desde detrás de su máscara, que es
   el gesto de la casa; los retratos se revelan con un barrido lateral y no
   con el fundido hacia arriba de siempre.
   ========================================================================== */

.anim .armado__t,
.anim .nomina__t,
.anim .reparto__t,
.anim .arranque__t {
  clip-path: inset(0 0 105% 0);
  transform: translateY(.45em);
  transition: clip-path .85s var(--ease), transform .85s var(--ease);
}
.anim .armado.is-in .armado__t,
.anim .nomina.is-in .nomina__t,
.anim .reparto.is-in .reparto__t,
.anim .arranque.is-in .arranque__t {
  clip-path: inset(0 0 -20% 0);
  transform: translateY(0);
}

.anim .armado__d,
.anim .nomina__d,
.anim .reparto__d,
.anim .arranque__d {
  opacity: 0;
  transform: translateY(.9rem);
  transition: opacity .7s var(--ease) .15s, transform .75s var(--ease) .15s;
}
.anim .is-in .armado__d,
.anim .is-in .nomina__d,
.anim .is-in .reparto__d,
.anim .is-in .arranque__d { opacity: 1; transform: translateY(0); }

.anim .hecho {
  opacity: 0;
  transform: translateY(.8rem);
  transition: opacity .6s var(--ease), transform .65s var(--ease);
}
.anim .armado.is-in .hecho { opacity: 1; transform: translateY(0); }
.anim .armado.is-in .hecho:nth-child(1) { transition-delay: .3s; }
.anim .armado.is-in .hecho:nth-child(2) { transition-delay: .38s; }
.anim .armado.is-in .hecho:nth-child(3) { transition-delay: .46s; }

/* Cada área lleva su propio `data-anim`, así que las trece personas no entran
   todas de golpe cuando asoma la primera: cada grupo se revela cuando le toca. */
.anim .area__cab {
  opacity: 0;
  transform: translateY(.7rem);
  transition: opacity .6s var(--ease), transform .65s var(--ease);
}
.anim .area.is-in .area__cab { opacity: 1; transform: translateY(0); }

.anim .per__foto { clip-path: inset(0 100% 0 0); transition: clip-path .8s var(--ease); }
.anim .area.is-in .per__foto { clip-path: inset(0 0 0 0); }

.anim .per__c,
.anim .per__d {
  opacity: 0;
  transform: translateY(.7rem);
  transition: opacity .6s var(--ease), transform .65s var(--ease);
}
.anim .area.is-in .per__c,
.anim .area.is-in .per__d { opacity: 1; transform: translateY(0); }

.anim .area.is-in .per:nth-child(1) .per__foto { transition-delay: .12s; }
.anim .area.is-in .per:nth-child(2) .per__foto { transition-delay: .22s; }
.anim .area.is-in .per:nth-child(3) .per__foto { transition-delay: .32s; }
.anim .area.is-in .per:nth-child(1) .per__c,
.anim .area.is-in .per:nth-child(1) .per__d { transition-delay: .3s; }
.anim .area.is-in .per:nth-child(2) .per__c,
.anim .area.is-in .per:nth-child(2) .per__d { transition-delay: .4s; }
.anim .area.is-in .per:nth-child(3) .per__c,
.anim .area.is-in .per:nth-child(3) .per__d { transition-delay: .5s; }

.anim .relevo__p {
  opacity: 0;
  transform: translateY(.8rem);
  transition: opacity .6s var(--ease), transform .65s var(--ease);
}
.anim .reparto.is-in .relevo__p { opacity: 1; transform: translateY(0); }
.anim .reparto.is-in .relevo__p:nth-child(1) { transition-delay: .28s; }
.anim .reparto.is-in .relevo__p:nth-child(2) { transition-delay: .36s; }
.anim .reparto.is-in .relevo__p:nth-child(3) { transition-delay: .44s; }
.anim .reparto.is-in .relevo__p:nth-child(4) { transition-delay: .52s; }
.anim .reparto.is-in .relevo__p:nth-child(5) { transition-delay: .60s; }
.anim .reparto.is-in .relevo__p:nth-child(6) { transition-delay: .68s; }

.anim .relevo__hilo {
  opacity: 0;
  transform: translateX(-.6rem);
  transition: opacity .7s var(--ease) .75s, transform .7s var(--ease) .75s;
}
.anim .reparto.is-in .relevo__hilo { opacity: 1; transform: translateX(0); }

.anim .arranque__fin {
  opacity: 0;
  transform: translateY(.8rem);
  transition: opacity .6s var(--ease) .3s, transform .65s var(--ease) .3s;
}
.anim .arranque.is-in .arranque__fin { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .anim .armado__t,
  .anim .nomina__t,
  .anim .reparto__t,
  .anim .arranque__t { clip-path: none; transform: none; }

  .anim .per__foto { clip-path: none; }

  .anim .armado__d,
  .anim .nomina__d,
  .anim .reparto__d,
  .anim .arranque__d,
  .anim .hecho,
  .anim .area__cab,
  .anim .per__c,
  .anim .per__d,
  .anim .relevo__p,
  .anim .relevo__hilo,
  .anim .arranque__fin { opacity: 1; transform: none; }
}

.arranque__in { display: block; text-align: center; }
.arranque__t, .arranque__d, .arranque__nota { margin-inline: auto; }
.arranque__fin { justify-items: center; margin-top: clamp(1.75rem, 4vh, 2.25rem); }

/* Fichas de profesionales administradas desde professional-app. */
.per--without-photo .per__c { grid-column: 1 / -1; }
.per__linkedin {
  display: inline-block;
  margin-top: .65rem;
  font-size: .85rem;
  color: var(--purple-dark);
  text-underline-offset: .2em;
}
.per__profile summary {
  cursor: pointer;
  color: var(--purple-dark);
  font-weight: 500;
}
.per__profile summary:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 4px;
}
.per__bio { overflow-wrap: anywhere; }
.per__bio p { margin: 1rem 0 0; white-space: pre-line; }

.area--professionals { display: block; }

.per__n a { color: inherit; text-decoration: none; }
.per__n a:hover { text-decoration: underline; text-underline-offset: .2em; }
.per__profile { color: var(--purple-dark); text-underline-offset: .2em; }