/* ============================================================
   Investigación y docencia (research.html), tono azul p-research.
   Se apoya en el "Sistema visual" de styles.css; aquí va solo lo
   propio de esta página: el mapa del héroe, las tarjetas de líneas
   y publicaciones, el tablero de docencia y la red de contacto.
   Colores solo con tokens; todo lo decorativo con aria-hidden.
   ============================================================ */

/* Llama del incendio (único tono cálido de la página) */
.p-research {
  --rs-fire: color-mix(in oklch, var(--c-growth) 78%, var(--on-deep));
  --rs-fire-core: color-mix(in oklch, var(--c-growth) 30%, var(--on-deep));
}

/* ---------- Héroe: mapa con las tres líneas ---------- */
.rs-map .rs-topo {
  fill: none;
  stroke: var(--art-muted);
  stroke-width: 1;
  opacity: 0.7;
}

.rs-map .rs-demand { opacity: 0.75; }
.rs-map .rs-cycle { stroke-width: 1.6; }
.rs-map .rs-thin { stroke-width: 1; }
.rs-map .rs-trail { stroke-width: 1.6; opacity: 0.55; }

.rs-fire { fill: var(--rs-fire); }
.rs-fire-core { fill: var(--rs-fire-core); }

.rs-fire-ring {
  fill: none;
  stroke: var(--rs-fire);
  stroke-width: 1.2;
  opacity: 0.55;
}

/* Helicóptero: carga agua, vuela al incendio, descarga y regresa
   (el ciclo del modelo). Solo transform; sin animación queda sobre
   el incendio. */
.rs-heli {
  transform: translate(278px, 84px);
  animation: rs-fly 14s linear infinite;
}

@keyframes rs-fly {
  0%, 8% { transform: translate(176px, 118px) scaleX(1); }
  14.4% { transform: translate(195px, 101px) scaleX(1); }
  20.8% { transform: translate(214px, 90px) scaleX(1); }
  27.2% { transform: translate(235px, 83px) scaleX(1); }
  33.6% { transform: translate(256px, 81px) scaleX(1); }
  40%, 50% { transform: translate(278px, 84px) scaleX(1); }
  53% { transform: translate(278px, 84px) scaleX(-1); }
  59.4% { transform: translate(260px, 96px) scaleX(-1); }
  65.8% { transform: translate(242px, 105px) scaleX(-1); }
  72.2% { transform: translate(221px, 112px) scaleX(-1); }
  78.6% { transform: translate(199px, 116px) scaleX(-1); }
  85% { transform: translate(176px, 118px) scaleX(-1); }
  88%, 100% { transform: translate(176px, 118px) scaleX(1); }
}

/* Gotas que caen del balde sobre el incendio */
.rs-drops {
  opacity: 0;
  animation: rs-drop 14s linear infinite;
}

@keyframes rs-drop {
  0%, 41% { opacity: 0; transform: translateY(-4px); }
  43% { opacity: 1; }
  48% { opacity: 0.9; transform: translateY(6px); }
  50%, 100% { opacity: 0; transform: translateY(9px); }
}

/* ---------- Entradas con .reveal y realce al pasar el cursor ----------
   .reveal usa transform; el realce de tarjetas y listas usa translate
   para no chocar con ella (y sin el retraso escalonado). Solo se animan
   transform, translate y opacity. */
.js .p-research :is(.service, .highlight-list li).reveal {
  transition:
    opacity 0.6s ease var(--delay, 0s),
    transform 0.6s ease var(--delay, 0s),
    translate 0.3s var(--ease-out);
}

.p-research .service.reveal.is-visible:is(:hover, :focus-within),
.p-research .rs-pub-list li.reveal.is-visible:is(:hover, :focus-within) { translate: 0 -3px; }

.p-research .highlight-list.iconic li.reveal.is-visible:is(:hover, :focus-within) { translate: 4px 0; }

/* Sombra tintada de las tarjetas: una capa fija en ::after que solo
   cambia de opacidad (como .profile-card, growth y data) */
.p-research :is(.rs-lines .service-grid.cards > .service, .rs-pub-list li)::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 18px 36px -24px color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.p-research :is(.rs-lines .service-grid.cards > .service, .rs-pub-list li):is(:hover, :focus-within)::after { opacity: 1; }

/* Íconos dentro de listas: el acento, no el gris del texto */
.p-research .highlight-list .icon-badge { color: var(--accent); }

/* Insignias pequeñas (44 px): trazo más grueso y detalles menos tenues
   para que el ícono se lea a unos 27 px */
.p-research .icon-badge.sm .icon { stroke-width: 2.4; }
.p-research .icon-badge.sm .i-faint { opacity: 0.7; }

/* ---------- Líneas de investigación ---------- */
.rs-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

/* Croquis de cada problema; al pasar el cursor, sus guiones avanzan */
.rs-mini {
  width: 120px;
  flex: none;
  margin-top: 0.2rem;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.45s var(--ease-out);
}

.rs-mini .anim-flow { animation-play-state: paused; }

.service:is(:hover, :focus-within) .rs-mini {
  opacity: 1;
  transform: translateX(-4px);
}

.service:is(:hover, :focus-within) .rs-mini .anim-flow { animation-play-state: running; }

/* Croquis del incendio: curvas de nivel irregulares y la llama del
   héroe, aquí en ámbar pleno para que se lea sobre la tarjeta clara */
.rs-mini {
  --rs-fire: var(--c-growth);
  --rs-fire-core: color-mix(in oklch, var(--c-growth) 35%, var(--on-deep));
}

/* Tabletas: la tercera tarjeta ocupa toda la fila en vez de quedar sola,
   con su croquis más grande al lado del texto */
@media (min-width: 560px) and (max-width: 860px) {
  .rs-lines .service-grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .rs-lines .service-grid.cards > .service:last-child {
    --mini-w: clamp(140px, 26vw, 200px);
    grid-column: 1 / -1;
    position: relative;
    padding-right: calc(var(--mini-w) + 3rem);
  }

  .rs-lines .service:last-child .rs-mini {
    position: absolute;
    top: 50%;
    right: 1.6rem;
    width: var(--mini-w);
    margin-top: calc(var(--mini-w) * -0.27);
  }
}

/* ---------- Publicaciones: tarjetas en dos columnas ---------- */
.rs-pub-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1.2rem;
}

.rs-pub-list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 1.2rem 1.35rem 1.35rem;
  gap: 0.4rem;
}

.rs-pub-list li::before { inset: 0; }

.rs-pub-list li:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  border-left-color: var(--accent);
}

.rs-pub-list strong { font-size: 1.02rem; line-height: 1.35; }

.rs-pub-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  margin-bottom: 0.45rem;
}

/* Estado: píldora con su ícono (publicado, en revisión, en preparación) */
.p-research .highlight-list .status {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  padding: 0.18rem 0.7rem 0.18rem 0.5rem;
}

.p-research .status::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--st-icon) center / contain no-repeat;
  mask: var(--st-icon) center / contain no-repeat;
}

.p-research .highlight-list .status.st-pub {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.status.st-pub { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.4'/%3E%3Cpath d='M5.2 8.3l1.9 1.9 3.8-4.2'/%3E%3C/svg%3E"); }
.status.st-rev { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 9.2A5.4 5.4 0 1 1 11.6 4'/%3E%3Cpath d='M12.4 1.6v2.9H9.5'/%3E%3C/svg%3E"); }
.status.st-prep { --st-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.4' stroke-dasharray='2.4 2.1'/%3E%3Cpath d='M8 4.9V8l2.2 1.5'/%3E%3C/svg%3E"); }

.p-research .highlight-list .status.st-prep { border-style: dashed; }

/* Barra de avance en tres tramos al pie de la tarjeta (todas terminan
   alineadas en la misma fila); se llena al aparecer la tarjeta */
.rs-stage {
  display: flex;
  gap: 4px;
  margin: auto 0 0;
  padding-top: 0.9rem;
}

.rs-stage i {
  position: relative;
  overflow: hidden;
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.rs-stage i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out) calc(var(--delay, 0s) + 0.45s);
}

.rs-stage i:nth-child(2)::after { transition-delay: calc(var(--delay, 0s) + 0.7s); }
.rs-stage i:nth-child(3)::after { transition-delay: calc(var(--delay, 0s) + 0.95s); }

.rs-stage.s1 i:nth-child(n + 2)::after,
.rs-stage.s2 i:nth-child(3)::after,
.js .reveal:not(.is-visible) .rs-stage i::after { transform: scaleX(0); }

/* ---------- Docencia ---------- */
.rs-teach .split { align-items: start; }

.rs-board {
  max-width: 330px;
  align-self: center;
}

/* Halo suave detrás del tablero */
.rs-board::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--art-glow), transparent);
}

/* Recta objetivo que barre la región factible hasta el vértice óptimo */
.rs-sweep { animation: rs-sweep 9s var(--ease-io) infinite; }

@keyframes rs-sweep {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 1; }
  62% { transform: translate(37px, -37px); opacity: 1; }
  80%, 100% { transform: translate(37px, -37px); opacity: 0; }
}

.p-research .chip {
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out);
}

.p-research .chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

/* Membresías con su insignia */
.rs-member {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
}

.rs-member p { margin-top: 0 !important; }

/* ---------- Contacto: red de coautoría ----------
   En escritorio la red reemplaza las ondas del contacto (dos sistemas
   circulares juntos se ven recargados); cuando la grilla pasa a una
   columna se oculta la red y vuelven las ondas. */
.cta .rs-coauth { max-width: 280px; }

@media (min-width: 821px) {
  .p-research .cta::before { display: none; }
}

/* ---------- Pantallas pequeñas ---------- */
@media (max-width: 820px) {
  .rs-board { max-width: min(240px, 70%); }
  .rs-coauth { display: none; }
}

@media (max-width: 380px) {
  .rs-mini { width: 96px; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .rs-heli,
  .rs-drops,
  .rs-sweep { animation: none; }

  .p-research :is(.service, .highlight-list li).reveal.is-visible:is(:hover, :focus-within),
  .service:is(:hover, :focus-within) .rs-mini,
  .p-research .chip:hover { translate: none; transform: none; }
}