/* Smile & Align: cuerpo de /especialistas (2026-10-10, pedido de Axel: página de equipo de estudio de lujo).
   Solo lo carga /especialistas (tools/paginas.mjs, condición en el head), después de servicios*.css.

   Tres registros con jerarquía clara:
   1. La doctora: retrato grande a color que se queda quieto (sticky) mientras se lee su ficha; un filete dorado
      vertical lo acompaña, como la costura del hero.
   2. El equipo: el Dr. Roberto Ovando y la Dra. Laura Villanueva en un par desfasado (la segunda columna baja), con
      retratos más chicos que el de la doctora; Sandra Figueroa, asistente, en una fila corta debajo.
   3. Endodoncia e implantes: una línea, sin retratos (rotan, con cita previa).

   La cédula no es una fila más: va como registro, el número en Cormorant con cifras de caja entre dos filetes dorados,
   con el enlace al buscador de la SEP. El resto de la ficha es una lista de definiciones sin regla por fila.

   Movimiento en assets/js/especialistas.js (MOTION.md, 5j). Todo lo que sigue es el estado final: sin JS, con
   reduced-motion o sin GSAP la página se ve completa y quieta (--costura y --filete valen 1 por defecto). */

/* ───── Tramo en itálica dorada sobre claro ───── */
.eq-dra h2 em, .eq-equipo-s > .contenedor > h2 em { color: var(--dorado-hondo); }

/* ───── Retratos ───── */
.eq-retrato { position: relative; margin: 0; }
.eq-retrato__marco, .eq-retrato:not(.eq-retrato--dra) { aspect-ratio: 4 / 5; overflow: hidden; background: var(--arena); box-shadow: 0 44px 70px -52px rgba(31, 28, 24, .5); }
.eq-equipo-s .eq-retrato { background: #e2d9c8; }
.eq-retrato img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.mw-activo .eq-retrato img { will-change: transform; }

/* ───── 1. La doctora ───── */
.eq-dra { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 7vw, 7.5rem); align-items: start; }
/* El retrato cabe entero en la pantalla debajo de la cabecera y se queda mientras pasa la ficha. */
.eq-retrato--dra {
  position: sticky; top: calc(var(--cabecera-alto, 5.25rem) + clamp(1.5rem, 3.5vh, 2.5rem));
  width: min(100%, calc((100svh - var(--cabecera-alto, 5.25rem) - clamp(3rem, 7vh, 5rem)) * .8));
}
.eq-retrato--dra::after { content: ""; position: absolute; top: 0; bottom: 0; right: calc(-1 * clamp(1.25rem, 2.6vw, 2.5rem)); width: 1px; background: rgba(184, 149, 79, .7); transform-origin: 50% 0; transform: scaleY(var(--costura, 1)); }
.eq-dra__texto { padding-top: clamp(.5rem, 2vw, 2rem); }
.eq-dra h2 { max-width: none; margin-bottom: 0; font-size: clamp(3rem, 4.9vw, 4.4rem); line-height: 1.02; letter-spacing: -.012em; }
.eq-dra h2 em { display: block; padding-bottom: .04em; }

/* Cargo y biografía (los cuatro integrantes) */
.eq-cargo { margin-top: 1.1rem; font: 600 .74rem/1.6 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--dorado-hondo) !important; max-width: 34rem; }
.eq-bio { margin-top: clamp(1.4rem, 2.2vw, 1.9rem); font-size: 1.04rem; line-height: 1.72; max-width: 36rem !important; text-wrap: pretty; }

/* ───── Cédula como registro ───── */
.cedula { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; row-gap: .4rem; align-items: end; max-width: 36rem; margin-top: clamp(2rem, 3.4vw, 2.75rem); padding-block: 1.2rem 1.25rem; }
.cedula::before, .cedula::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; transform-origin: 0 50%; transform: scaleX(var(--filete, 1)); }
.cedula::before { top: 0; background: var(--dorado); }
.cedula::after { bottom: 0; background: rgba(184, 149, 79, .42); }
.cedula__etiqueta { grid-column: 1; font: 600 .7rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--dorado-hondo); }
.cedula__numero { grid-column: 1; display: block; overflow: hidden; padding-bottom: .06em; font: 500 clamp(2.35rem, 3.4vw, 3rem)/1 var(--display); letter-spacing: .045em; color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum"; }
.cedula__numero > span { display: block; }
.eq-persona .cedula__numero { font-size: clamp(2.1rem, 2.7vw, 2.5rem); }

/* ───── Ficha: formación y reconocimientos, sin regla por fila ───── */
.registro { display: grid; gap: 1.05rem; max-width: 36rem; margin: clamp(1.6rem, 2.8vw, 2.1rem) 0 0; }
.registro > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.25rem; }
.registro dt { font: 600 .7rem/1.95 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); }
.registro dd { margin: 0; font-size: .98rem; line-height: 1.58; color: var(--tinta); text-wrap: pretty; }

/* ───── 2. El equipo ───── */
.eq-equipo-s > .contenedor > h2 { margin-bottom: clamp(3rem, 6vw, 5rem); }
.eq-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 7vw, 7rem); align-items: start; }
/* La segunda columna baja: el par se lee como una composición, no como dos tarjetas iguales. */
.eq-persona:nth-child(2) { margin-top: clamp(5rem, 12vw, 11rem); }
.eq-persona .eq-retrato { width: min(100%, 25rem); }
.eq-persona .eq-datos { max-width: 34rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.eq-persona h3, .eq-asistente h3 { color: var(--tinta); line-height: 1.04; }
.eq-persona h3 { font-size: clamp(2.1rem, 3vw, 2.75rem); }
.eq-persona .enlace-flecha { margin-top: 1.75rem; }

.eq-asistente { display: grid; grid-template-columns: clamp(7.5rem, 11vw, 10rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; max-width: 48rem; margin-top: clamp(4.5rem, 9vw, 8rem); padding-top: clamp(2rem, 3.5vw, 3rem); border-top: 1px solid var(--linea); }
.eq-asistente h3 { font-size: clamp(1.75rem, 2.3vw, 2.1rem); }
.eq-asistente .eq-cargo { margin-top: .55rem; }
.eq-asistente .eq-bio { margin-top: .7rem; }

/* Títulos de persona por máscara (los h2 los envuelve paginas.js; los h3 especialistas.js con la misma clase). */
.eq-datos h3 .t-cortina { padding-bottom: .1em; margin-bottom: -.1em; }

/* ───── 3. Especialidades por confirmar ───── */
.eq-pendientes { display: grid; grid-template-columns: repeat(3, minmax(0, 10rem)); gap: clamp(1.5rem, 3vw, 2.75rem); margin: 0; padding: 0; list-style: none; }
.eq-pendientes .placeholder { aspect-ratio: 4 / 5; min-height: 0; }
.eq-pendientes li > span { display: block; margin-top: .9rem; font: 500 1.4rem/1.1 var(--display); color: var(--tinta); }
.eq-pendientes__nota { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* ───── Teléfono y tableta ───── */
@media (max-width: 899.98px) {
  .eq-dra { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .eq-retrato--dra { position: relative; top: auto; width: 100%; }
  .eq-retrato--dra::after { display: none; }
  .eq-dra__texto { padding-top: 0; }
  .eq-dra h2 { font-size: clamp(2.7rem, 11.5vw, 4rem); }
  .eq-par { grid-template-columns: 1fr; gap: clamp(4rem, 12vw, 5.5rem); }
  .eq-persona:nth-child(2) { margin-top: 0; }
  .eq-persona .eq-retrato { width: min(100%, 26rem); }
  .registro > div { grid-template-columns: 1fr; gap: .1rem; }
  .cedula { grid-template-columns: 1fr; }
  .eq-asistente { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: start; }
  .eq-pendientes { grid-template-columns: 1fr; gap: 1.1rem; }
  .eq-pendientes li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.25rem; align-items: center; }
  .eq-pendientes .placeholder { padding: .5rem; font-size: .75rem; letter-spacing: .02em; overflow-wrap: anywhere; }
  .eq-pendientes .placeholder strong { font-size: .75rem; }
  .eq-pendientes li > span { margin-top: 0; }
}