.ecosistema-page {
  --eco-formacion: #5ad7df;
  --eco-ia: #f5c542;
  --eco-campus: #8f9bff;
  --eco-comunidad: #d08fe8;
  --eco-observatorio: #5ad7df;
  --eco-talentum: #8f9bff;
  --eco-scientific: #d08fe8;
  --eco-agentes: #f5c542;

  --eco-ink: #fff5e9;
  --eco-ink-soft: #dbe4ee;
  --eco-line: rgba(255, 255, 255, 0.14);
  --eco-panel: rgba(255, 255, 255, 0.05);
  --eco-panel-hover: rgba(255, 255, 255, 0.09);
  --eco-maqueta-tinta: #2f78ab;
  --eco-maqueta-fondo: #06213a;
  --eco-snap: cubic-bezier(0.32, 0.72, 0, 1);
  --eco-t-tap: 140ms;
  --eco-t-hover: 320ms;
  --eco-t-panel: 340ms;
}


@supports (transition-timing-function: linear(0, 1)) {
  .ecosistema-page {
    --eco-snap: linear(0, 0.0033 0.9%, 0.0286 3%, 0.1071 6.1%, 0.3143 12.1%,
        0.6286 20.3%, 0.7857 25%, 0.8929 30%, 0.9464 34.4%, 0.9821 40%,
        1 50%, 1 100%);
  }
}

.ecosistema-page {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

.ecosistema-page .ag-atmos .agentes-orb {
  translate: -50% -50%;
  transform: none;
}

.ecosistema-page .ag-atmos .agentes-orb--1 {
  left: 16%;
  top: 26%;
}

.ecosistema-page .ag-atmos .agentes-orb--2 {
  left: 86%;
  top: 20%;
}

.ecosistema-page .ag-atmos .agentes-orb--3 {
  left: 44%;
  top: 92%;
}

.ecosistema-page .ag-atmos .agentes-orb--1::before {
  opacity: 0.34;
}

.ecosistema-page .ag-atmos .agentes-orb::before {
  will-change: transform;
}

.ecosistema-page.esta-oculta .ag-atmos .agentes-orb::before {
  animation-play-state: paused;
}

.ecosistema-page .ag-btn--ghost {
  border-color: rgba(244, 238, 233, 0.62);
}

.ecosistema-page .ag-btn--primary {
  box-shadow: 0 8px 24px rgba(4, 18, 36, 0.45);
}

.ecosistema-page .ag-btn--primary:hover,
.ecosistema-page .ag-btn--primary:focus-visible {
  box-shadow: 0 14px 34px rgba(4, 18, 36, 0.55);
}

.eco-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(104px, 12vh, 150px) clamp(16px, 4vw, 48px) clamp(40px, 6vh, 80px);
  text-align: center;
  overflow: hidden;
}

.eco-hero__head {
  position: relative;
  z-index: 3;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eco-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, min(7.4vw, 9.6vh), 100px);
  line-height: 0.92;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--eco-ink);
  margin: 0 0 clamp(16px, 2.4vh, 26px);
  text-wrap: balance;
  text-shadow: 0 10px 60px rgba(3, 14, 28, 0.75);
}

.eco-title em {
  font-style: normal;
  color: var(--eco-ia);
}

.eco-lead {
  font-family: var(--font-sans-regular);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  letter-spacing: 0;
  color: #fff;
  max-width: 46ch;
  margin: 0 0 clamp(26px, 3.6vh, 38px);
  text-wrap: pretty;
}

.eco-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.eco-mundo {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: grid;
  width: 100%;
  max-width: 1180px;
  margin: clamp(-40px, -3vh, -10px) auto 0;
}

.eco-stage {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  isolation: isolate;
}

.eco-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 74%;
  height: 42%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
      rgba(90, 215, 223, 0.24) 0%,
      rgba(49, 62, 180, 0.16) 42%,
      rgba(7, 32, 56, 0) 72%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}

.eco-stage__canvas {
  position: absolute;
  inset: -12%;
  z-index: 1;
  pointer-events: none;
}

.eco-stage__canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.eco-stage__ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(54%, 420px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(45deg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 12.5% 12.5%,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 12.5% 12.5%;
  opacity: 0.8;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 0;
}

.eco-stage.is-ready .eco-stage__ghost {
  opacity: 0;
}

.eco-maqueta {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 24px 40px rgba(3, 12, 24, 0.55));
}

.eco-maqueta__hilos line {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.eco-maqueta__techo {
  fill: color-mix(in srgb, var(--eco-maqueta-tinta) 72%, #eaf4ff);
}

.eco-maqueta__cara-a {
  fill: var(--eco-maqueta-tinta);
}

.eco-maqueta__cara-b {
  fill: color-mix(in srgb, var(--eco-maqueta-tinta) 64%, var(--eco-maqueta-fondo));
}

.eco-maqueta__suelo {
  fill: color-mix(in srgb, var(--eco-maqueta-tinta) 48%, var(--eco-maqueta-fondo));
}

.eco-maqueta__canto {
  fill: color-mix(in srgb, var(--eco-maqueta-tinta) 20%, var(--eco-maqueta-fondo));
}

.eco-maqueta__isla .eco-maqueta__suelo {
  fill: color-mix(in srgb, var(--c) 26%, color-mix(in srgb, var(--eco-maqueta-tinta) 44%, var(--eco-maqueta-fondo)));
}

.eco-maqueta__isla .eco-maqueta__canto {
  fill: color-mix(in srgb, var(--c) 14%, var(--eco-maqueta-fondo));
}

.eco-maqueta__bloque-techo {
  fill: var(--c);
}

.eco-maqueta__bloque-a {
  fill: color-mix(in srgb, var(--c) 78%, var(--eco-maqueta-fondo));
}

.eco-maqueta__bloque-b {
  fill: color-mix(in srgb, var(--c) 52%, var(--eco-maqueta-fondo));
}

.eco-pins {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.eco-pin {
  position: absolute;
  translate: -50% -50%;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 46%),
    rgba(9, 27, 48, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 14px 38px rgba(4, 18, 36, 0.55);
  color: var(--eco-ink);
  font-family: var(--font-display);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--eco-t-hover) var(--eco-snap),
    border-color var(--eco-t-hover) var(--eco-snap),
    box-shadow var(--eco-t-hover) var(--eco-snap);
}

.eco-pin:hover,
.eco-pin:focus-visible {
  transform: translateY(-4px);
  border-color: var(--pin-color, var(--eco-ia));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 22px 50px rgba(4, 18, 36, 0.62);
}

.eco-pin:active {
  transform: translateY(-1px) scale(0.985);
  transition-duration: var(--eco-t-tap);
}

.eco-pin:focus-visible {
  outline: 2px solid var(--eco-ink);
  outline-offset: 3px;
}

.eco-pin__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pin-color, #fff) 20%, transparent);
  color: var(--pin-color, #fff);
}

.eco-pin__icon svg {
  width: 19px;
  height: 19px;
}

.eco-pin__name {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.eco-pin--observatorio {
  left: 14.3%;
  top: 37.1%;
}

.eco-pin--talentum {
  left: 29.8%;
  top: 52.7%;
}

.eco-pin--esam {
  left: 48%;
  top: 36.4%;
}

.eco-pin--scientific {
  left: 65.2%;
  top: 49%;
}

.eco-pin--agentes {
  left: 81.7%;
  top: 37.1%;
}

.eco-section {
  position: relative;
  padding: clamp(70px, 11vh, 130px) clamp(20px, 5vw, 56px);
}

.eco-section__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.eco-head {
  max-width: 760px;
  margin: 0 0 clamp(38px, 6vh, 66px);
}

.eco-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


.eco-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.014em;
  color: var(--eco-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

.eco-head p {
  font-family: var(--font-sans-regular);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.65;
  color: #fff;
  margin: 0;
  max-width: 58ch;
  text-wrap: pretty;
}

.eco-head--center p {
  margin-inline: auto;
}

.eco-manifiesto__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.eco-manifiesto__aside {
  position: sticky;
  top: 120px;
}

.eco-manifiesto__aside h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 0.96;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: var(--eco-ink);
  margin: 0;
  text-wrap: balance;
}

.eco-prose p {
  font-family: var(--font-sans-regular);
  font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.7;
  letter-spacing: 0;
  color: #fff;
  margin: 0 0 22px;
  max-width: 62ch;
  text-wrap: pretty;
}

.eco-prose p:last-child {
  margin-bottom: 0;
}

.eco-prose strong {
  font-family: var(--font-sans-semi);
  font-weight: 600;
  color: var(--eco-ia);
}

.eco-capa {
  border-top: 1px solid color-mix(in srgb, var(--capa-color, #fff) 38%, transparent);
  padding: clamp(36px, 5vh, 56px) 0;
  border-radius: 20px;
  transition: box-shadow 0.5s var(--eco-snap);
}

.eco-capa:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.eco-capa.is-target {
  box-shadow: 0 0 0 1px var(--capa-color, var(--eco-ia)),
    0 0 60px -10px var(--capa-color, var(--eco-ia));
}

.eco-capa__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 clamp(22px, 3vh, 34px);
  padding-inline: clamp(0px, 1vw, 16px);
}

.eco-capa__head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--eco-ink);
  margin: 0;
}

.eco-capa__head p {
  font-family: var(--font-sans-regular);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--eco-ink-soft);
  margin: 0;
  flex: 1 1 320px;
  min-width: 260px;
  max-width: 52ch;
}

.eco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  padding-inline: clamp(0px, 1vw, 16px);
}

.eco-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.4vw, 28px);
  border-radius: 18px;
  border: 1px solid var(--eco-line);
  background: var(--eco-panel);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform var(--eco-t-hover) var(--eco-snap),
    border-color var(--eco-t-hover) var(--eco-snap),
    background-color var(--eco-t-hover) var(--eco-snap),
    box-shadow var(--eco-t-hover) var(--eco-snap);
}

.eco-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
      var(--capa-color, var(--eco-ia)),
      transparent 78%);
  opacity: 0.55;
  transition: opacity var(--eco-t-hover) var(--eco-snap);
}

a.eco-card:hover,
a.eco-card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--capa-color, #fff) 45%, transparent);
  background: var(--eco-panel-hover);
  box-shadow: 0 22px 50px rgba(4, 18, 36, 0.42);
}

a.eco-card:active {
  transform: translateY(-1px) scale(0.994);
  transition-duration: var(--eco-t-tap);
}

a.eco-card:focus-visible {
  outline: 2px solid var(--eco-ink);
  outline-offset: 3px;
}

a.eco-card:hover::before,
a.eco-card:focus-visible::before {
  opacity: 1;
}

.eco-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--capa-color, #fff) 15%, transparent);
  color: var(--capa-color, #fff);
  margin-bottom: 4px;
}

.eco-card__icon svg {
  width: 22px;
  height: 22px;
}

.eco-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.004em;
  color: var(--eco-ink);
  margin: 0;
}

.eco-card:has(.eco-tag) h4 {
  padding-right: 78px;
}

.eco-card p {
  font-family: var(--font-sans-regular);
  font-size: 15px;
  line-height: 1.58;
  color: var(--eco-ink-soft);
  margin: 0;
  flex: 1;
}

.eco-card__foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--eco-ink);
}

.eco-card__foot svg {
  transition: transform var(--eco-t-hover) var(--eco-snap);
}

a.eco-card:hover .eco-card__foot svg,
a.eco-card:focus-visible .eco-card__foot svg {
  transform: translateX(4px);
}

/* Etiquetas de estado. */
.eco-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--eco-line);
  color: var(--eco-ink-soft);
}

.eco-tag--live {
  color: #b9f5c9;
  border-color: rgba(122, 222, 152, 0.45);
  background: rgba(122, 222, 152, 0.12);
}

.eco-tag--pilot {
  color: #ffe6a8;
  border-color: rgba(245, 197, 66, 0.45);
  background: rgba(245, 197, 66, 0.12);
}

.eco-destacado {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(16px, 2vw, 26px);
  padding-inline: clamp(0px, 1vw, 16px);
}

.eco-agente {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid var(--eco-line);
  background: var(--eco-panel);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform var(--eco-t-hover) var(--eco-snap),
    border-color var(--eco-t-hover) var(--eco-snap),
    box-shadow var(--eco-t-hover) var(--eco-snap);
}

.eco-agente:hover,
.eco-agente:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(245, 197, 66, 0.5);
  box-shadow: 0 28px 64px rgba(4, 18, 36, 0.5);
}

.eco-agente:active {
  transform: translateY(-1px) scale(0.995);
  transition-duration: var(--eco-t-tap);
}

.eco-agente:focus-visible {
  outline: 2px solid var(--eco-ink);
  outline-offset: 3px;
}

.eco-agente__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(245, 197, 66, 0.16), transparent 62%),
    rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--eco-line);
}

.eco-agente__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 700ms var(--eco-snap);
}

.eco-agente:hover .eco-agente__media img,
.eco-agente:focus-visible .eco-agente__media img {
  transform: scale(1.04);
}

.eco-agente__media--figura {
  display: grid;
  place-items: end center;
  padding-top: 22px;
}

.eco-agente__media--figura img {
  width: auto;
  max-width: 58%;
  height: 88%;
  object-fit: contain;
}

.eco-agente__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: clamp(22px, 2.4vw, 30px);
}

.eco-agente__body h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--eco-ink);
  margin: 0;
}

.eco-agente__body p {
  font-family: var(--font-sans-regular);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--eco-ink-soft);
  margin: 0;
  flex: 1;
}

.eco-agente .eco-tag {
  top: auto;
  right: auto;
  position: static;
  align-self: flex-start;
}

.eco-agente__foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--eco-ink);
}

.eco-agente__foot svg {
  transition: transform var(--eco-t-hover) var(--eco-snap);
}

.eco-agente:hover .eco-agente__foot svg,
.eco-agente:focus-visible .eco-agente__foot svg {
  transform: translateX(4px);
}

.eco-mas {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: clamp(10px, 1.6vh, 18px) clamp(0px, 1vw, 16px) 0;
  padding: 11px 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--eco-ink);
  text-decoration: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28));
  background-size: 100% 1px;
  background-position: 0 calc(100% - 11px);
  background-repeat: no-repeat;
  transition: background-image var(--eco-t-hover) var(--eco-snap);
}

.eco-mas:hover,
.eco-mas:focus-visible {
  background-image: linear-gradient(var(--eco-ia), var(--eco-ia));
}

.eco-mas:focus-visible {
  outline: 2px solid var(--eco-ink);
  outline-offset: 4px;
}

.eco-mas svg {
  transition: transform var(--eco-t-hover) var(--eco-snap);
}

.eco-mas:hover svg,
.eco-mas:focus-visible svg {
  transform: translateX(4px);
}

.eco-ruta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.eco-paso {
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--eco-line);
}

.eco-paso::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--eco-ia);
  box-shadow: 0 0 0 4px #072038;
}

.eco-paso h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--eco-ink);
  margin: 0 0 8px;
}

.eco-paso p {
  font-family: var(--font-sans-regular);
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--eco-ink-soft);
  margin: 0;
}

@media (min-width: 1024px) {
  .eco-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    align-content: stretch;
    gap: 0 clamp(28px, 4vw, 72px);
    max-width: 1800px;
    margin-inline: auto;
    padding: clamp(104px, 12vh, 150px) clamp(24px, 4vw, 64px) clamp(44px, 6vh, 84px);
    text-align: left;
  }

  .eco-hero__head {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    align-items: flex-start;
    max-width: 620px;
  }

  .eco-hero .eco-hero__actions {
    justify-content: flex-start;
  }

  .eco-mundo {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    width: 100%;
    max-width: none;
    min-height: 380px;
    max-height: 860px;
    margin: 0 0 0 calc(-1 * clamp(12px, 2vw, 40px));
  }

  .eco-stage {
    aspect-ratio: auto;
  }

}

@media (max-width: 900px) {
  .eco-manifiesto__inner {
    grid-template-columns: 1fr;
  }

  .eco-manifiesto__aside {
    position: static;
  }
}

@media (max-width: 760px) {
  .eco-hero {
    min-height: auto;
    padding-top: clamp(96px, 14vh, 140px);
  }

  .eco-mundo {
    max-height: none;
    margin-top: 8px;
  }

  .eco-stage {
    aspect-ratio: 4 / 3;
  }

  .eco-pins {
    grid-area: 2 / 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
  }

  .eco-pin {
    position: static;
    translate: none;
    width: 100%;
    padding: 10px 12px;
  }

  .eco-pin--esam {
    grid-column: 1 / -1;
    order: -1;
    justify-content: center;
  }

  .eco-pin:hover,
  .eco-pin:focus-visible {
    transform: translateY(-3px);
  }


  .eco-card:has(.eco-tag) h4 {
    padding-right: 0;
  }

  .eco-tag {
    position: static;
    align-self: flex-start;
    order: -1;
  }
}

@media (max-width: 520px) {
  .eco-pins {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {

  .eco-pin,
  .eco-card,
  .eco-agente,
  .eco-mas,
  .eco-capa,
  .eco-card__foot svg,
  .eco-agente__foot svg,
  .eco-mas svg,
  .eco-agente__media img,
  .eco-stage__ghost {
    transition: none;
  }

  .eco-agente:hover .eco-agente__media img,
  .eco-agente:focus-visible .eco-agente__media img {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .eco-pin {
    background: #0d2440;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 760px) {
  .eco-pin {
    background: rgba(11, 32, 55, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.eco-pin--esam {
  --pin-color: var(--eco-ia);
  gap: 10px;
  padding: 13px 20px;
  font-size: 0.94rem;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06) 46%),
    rgba(245, 197, 66, 0.92);
  border-color: rgba(255, 255, 255, 0.5);
  color: #16233a;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eco-pin--esam .eco-pin__dot {
  background: #16233a;
  box-shadow: 0 0 0 4px rgba(22, 35, 58, 0.18);
}

.eco-pin__abajo {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.eco-pin__abajo svg {
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .eco-pin--esam .eco-pin__abajo {
    animation: eco-latir 2.6s ease-in-out infinite;
  }
}

@keyframes eco-latir {

  0%,
  72%,
  100% {
    transform: translateY(0);
  }

  84% {
    transform: translateY(3px);
  }
}

.eco-panel {
  position: absolute;
  z-index: 920;
  text-align: left;
  right: clamp(16px, 3vw, 40px);
  top: clamp(88px, 11vh, 132px);
  bottom: clamp(24px, 4vh, 56px);
  width: min(460px, 42vw);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 40%),
    rgba(7, 24, 44, 0.9);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 30px 70px rgba(3, 12, 26, 0.6);
  overflow: hidden;
}

.eco-panel[hidden] {
  display: none;
}

.eco-panel {
  opacity: 0;
  transform: translateX(22px) scale(0.99);
  transition:
    opacity var(--eco-t-panel) var(--eco-snap),
    transform var(--eco-t-panel) var(--eco-snap);
}

.eco-panel.is-abierto {
  opacity: 1;
  transform: none;
}

.eco-panel__cabecera {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(18px, 2.4vw, 26px) 0 clamp(22px, 3vw, 32px);
}

.eco-panel__marcas {
  display: flex;
  min-height: 1px;
}

.eco-ficha__marca[hidden] {
  display: none;
}

.eco-panel__cerrar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(9, 27, 48, 0.72);
  color: var(--eco-ink);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.eco-panel__cerrar:hover,
.eco-panel__cerrar:focus-visible {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(15, 40, 70, 0.9);
}

.eco-panel__cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 3vw, 32px);
  padding-top: clamp(16px, 2vw, 22px);
}

.eco-ficha[hidden] {
  display: none;
}

.eco-ficha__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 4.4vw, 68px);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(160deg, #ffffff, #eef3fb);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(3, 12, 26, 0.35);
  color: var(--ficha-color);
  overflow: hidden;
}

.eco-ficha__marca img,
.eco-ficha__marca svg {
  width: 68%;
  height: 68%;
  object-fit: contain;
}

.eco-ficha[data-ficha="talentum"] .eco-ficha__marca img {
  filter: brightness(0);
}

.eco-ficha[data-ficha="observatorio"] .eco-ficha__marca {
  color: #0e6f78;
}

.eco-ficha .eco-ficha__tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ficha-color) 55%, transparent);
  color: var(--ficha-color);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eco-ficha__titulo {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ficha-color);
}

.eco-ficha .eco-ficha__lead {
  margin: 0 0 16px;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--eco-ink);
}

.eco-ficha p {
  margin: 0 0 14px;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--eco-ink-soft);
}

.eco-ficha__sub {
  position: relative;
  margin: 22px 0 8px;
  padding-left: 16px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eco-ink);
}

.eco-ficha__sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ficha-color);
}

.eco-ficha__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ficha-color) 60%, transparent);
  background: color-mix(in srgb, var(--ficha-color) 14%, transparent);
  color: var(--eco-ink);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.eco-ficha__cta:hover,
.eco-ficha__cta:focus-visible {
  border-color: var(--ficha-color);
  background: color-mix(in srgb, var(--ficha-color) 24%, transparent);
}

.eco-panel__nav {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px clamp(18px, 2.4vw, 26px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(4, 16, 32, 0.5);
}

.eco-panel__paso {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--eco-ink-soft);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}

.eco-panel__paso:hover,
.eco-panel__paso:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--eco-ink);
}

@media (max-width: 1023px) {
  .eco-panel {
    right: clamp(12px, 4vw, 28px);
    left: clamp(12px, 4vw, 28px);
    width: auto;
    top: auto;
    height: min(72vh, 620px);
  }
}

@media (max-width: 760px) {
  .eco-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: min(78vh, 560px);
    border-radius: 20px;
  }
}

.eco-pin.is-activo {
  border-color: var(--pin-color);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 0 0 2px color-mix(in srgb, var(--pin-color) 45%, transparent),
    0 14px 38px rgba(4, 18, 36, 0.55);
}

.eco-pin.is-activo .eco-pin__name {
  color: var(--pin-color);
}

.Header_headerSecondary,
[class*="site-header__right"],
.eco-hero__head {
  transition:
    opacity var(--eco-t-panel) var(--eco-snap),
    transform var(--eco-t-panel) var(--eco-snap),
    visibility 0s;
}

body.eco-panel-abierto .Header_headerSecondary,
body.eco-panel-abierto [class*="site-header__right"] {
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--eco-t-panel) var(--eco-snap),
    transform var(--eco-t-panel) var(--eco-snap),
    visibility 0s var(--eco-t-panel);
}

body.eco-panel-abierto .eco-hero__head {
  opacity: 0;
  transform: translateX(-24px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--eco-t-panel) var(--eco-snap),
    transform var(--eco-t-panel) var(--eco-snap),
    visibility 0s var(--eco-t-panel);
}

@media (prefers-reduced-motion: reduce) {

  .eco-panel,
  .Header_headerSecondary,
  [class*="site-header__right"],
  .eco-hero__head {
    transition-duration: 0.01ms;
    transform: none !important;
  }
}

@media (min-width: 1024px) {
  .eco-panel {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    inset: 0;
    top: calc(112px - clamp(104px, 12vh, 150px));
    bottom: calc(14px - clamp(44px, 6vh, 84px));
    width: auto;
    max-width: none;
  }
}

@media (min-width: 1360px) {
  .eco-panel {
    top: calc(18px - clamp(104px, 12vh, 150px));
  }
}

.eco-panel__cuerpo {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.eco-panel__cuerpo::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.eco-panel__cuerpo.hay-mas-abajo {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 54px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 54px), transparent);
}

.eco-panel__cuerpo.hay-mas-arriba.hay-mas-abajo {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30px, #000 calc(100% - 54px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30px, #000 calc(100% - 54px), transparent);
}

.eco-panel__cuerpo.hay-mas-arriba:not(.hay-mas-abajo) {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30px);
  mask-image: linear-gradient(to bottom, transparent, #000 30px);
}

.eco-pin {
  transition:
    opacity var(--eco-t-panel) var(--eco-snap),
    transform var(--eco-t-hover) var(--eco-snap),
    border-color var(--eco-t-hover) var(--eco-snap),
    box-shadow var(--eco-t-hover) var(--eco-snap),
    visibility 0s;
}

body.eco-panel-abierto .eco-pin {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--eco-t-panel) var(--eco-snap),
    visibility 0s var(--eco-t-panel);
}

.eco-cielo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.eco-cielo::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto;
  height: 66%;
  background: radial-gradient(120% 100% at 50% 0%,
      rgba(120, 170, 240, 0.18) 0%,
      rgba(90, 140, 220, 0.08) 44%,
      rgba(7, 32, 56, 0) 74%);
}

.eco-nube,
.eco-estrellas,
.eco-grano {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.eco-nube {
  background-image: url("../images/ecosistema/textures/clouds.jpg");
  filter: grayscale(1) brightness(0.28) contrast(1.15);
  mix-blend-mode: screen;
}

.eco-nube--1 {
  left: -6%;
  top: 2%;
  width: 52%;
  aspect-ratio: 2.2;
  opacity: 0.55;
}

.eco-nube--2 {
  left: 38%;
  top: -6%;
  width: 46%;
  aspect-ratio: 2.4;
  opacity: 0.44;
}

.eco-nube--3 {
  left: 62%;
  top: 12%;
  width: 48%;
  aspect-ratio: 2.1;
  opacity: 0.36;
}

.eco-nube--4 {
  left: 8%;
  top: 24%;
  width: 40%;
  aspect-ratio: 2.6;
  opacity: 0.24;
}

.eco-estrellas {
  background-image: url("../images/ecosistema/textures/stars.jpg");
  filter: grayscale(1) brightness(0.45);
  mix-blend-mode: screen;
}

.eco-estrellas {
  width: clamp(20px, 2.2vw, 34px);
  aspect-ratio: 1;
}

.eco-estrellas--1 {
  left: 9%;
  top: 17%;
}

.eco-estrellas--2 {
  left: 74%;
  top: 14%;
  transform: rotate(28deg);
}

.eco-estrellas--3 {
  left: 45%;
  top: 24%;
  transform: rotate(-15deg);
  width: clamp(15px, 1.7vw, 26px);
}

.eco-estrellas--4 {
  left: 88%;
  top: 27%;
  transform: rotate(48deg);
}

.eco-estrellas--5 {
  left: 26%;
  top: 30%;
  transform: rotate(-32deg);
  width: clamp(14px, 1.5vw, 23px);
}

.eco-estrellas--6 {
  left: 60%;
  top: 19%;
  transform: rotate(12deg);
  width: clamp(16px, 1.8vw, 28px);
}

.eco-estrellas--7 {
  left: 35%;
  top: 13%;
  transform: rotate(-48deg);
  width: clamp(13px, 1.4vw, 21px);
}

.eco-grano {
  inset: 0;
  background-image: url("../images/ecosistema/textures/noise-solid.png");
  background-repeat: repeat;
  background-size: 240px 240px;
  filter: grayscale(1);
  mix-blend-mode: soft-light;
  opacity: 0.2;
}

@media (prefers-reduced-motion: no-preference) {
  .eco-nube {
    animation: eco-derivar ease-in-out infinite,
      eco-deformar ease-in-out infinite alternate;
  }

  .eco-nube--1 {
    animation-duration: 150s, 34s;
  }

  .eco-nube--2 {
    animation-duration: 196s, 43s;
    animation-direction: reverse, normal;
  }

  .eco-nube--3 {
    animation-duration: 134s, 29s;
  }

  .eco-nube--4 {
    animation-duration: 178s, 38s;
    animation-direction: reverse, normal;
  }

  .eco-estrellas {
    animation: eco-titilar ease-in-out infinite;
  }

  .eco-estrellas--1 {
    animation-duration: 7s;
  }

  .eco-estrellas--2 {
    animation-duration: 9s;
    animation-delay: -3s;
  }

  .eco-estrellas--3 {
    animation-duration: 11s;
    animation-delay: -6s;
  }

  .eco-estrellas--4 {
    animation-duration: 8s;
    animation-delay: -2s;
  }

  .eco-estrellas--5 {
    animation-duration: 12s;
    animation-delay: -5s;
  }

  .eco-estrellas--6 {
    animation-duration: 10s;
    animation-delay: -8s;
  }

  .eco-estrellas--7 {
    animation-duration: 13s;
    animation-delay: -1s;
  }
}

@keyframes eco-derivar {
  from {
    translate: -7% 0;
  }

  50% {
    translate: 7% -2.6%;
  }

  to {
    translate: -7% 0;
  }
}

@keyframes eco-deformar {
  from {
    scale: 1 1;
  }

  to {
    scale: 1.16 0.9;
  }
}

@keyframes eco-titilar {
  0% {
    opacity: var(--titilar-min, 0.14);
  }

  30% {
    opacity: var(--titilar-max, 0.32);
  }

  58% {
    opacity: var(--titilar-min, 0.14);
  }

  70% {
    opacity: var(--titilar-min, 0.14);
  }

  76% {
    opacity: var(--titilar-destello, 0.46);
  }

  84% {
    opacity: var(--titilar-min, 0.14);
  }

  100% {
    opacity: var(--titilar-min, 0.14);
  }
}

.eco-estrellas--1 {
  --titilar-min: 0.16;
  --titilar-max: 0.35;
  --titilar-destello: 0.507;
}

.eco-estrellas--2 {
  --titilar-min: 0.12;
  --titilar-max: 0.28;
  --titilar-destello: 0.406;
}

.eco-estrellas--3 {
  --titilar-min: 0.09;
  --titilar-max: 0.22;
  --titilar-destello: 0.319;
}

.eco-estrellas--4 {
  --titilar-min: 0.09;
  --titilar-max: 0.2;
  --titilar-destello: 0.29;
}

.eco-estrellas--5 {
  --titilar-min: 0.1;
  --titilar-max: 0.24;
  --titilar-destello: 0.348;
}

.eco-estrellas--6 {
  --titilar-min: 0.08;
  --titilar-max: 0.19;
  --titilar-destello: 0.275;
}

.eco-estrellas--7 {
  --titilar-min: 0.11;
  --titilar-max: 0.26;
  --titilar-destello: 0.377;
}

@media (max-width: 760px) {
  .eco-cielo {
    opacity: 0.5;
  }
}

.eco-stage__canvas canvas {
  -webkit-mask-image: radial-gradient(78% 78% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(78% 78% at 50% 50%, #000 62%, transparent 100%);
}

.eco-stage__canvas {
  -webkit-mask-image: linear-gradient(to bottom,
      #000 68%, rgba(0, 0, 0, 0.55) 82%, transparent 93%);
  mask-image: linear-gradient(to bottom,
      #000 68%, rgba(0, 0, 0, 0.55) 82%, transparent 93%);
}

body.eco-panel-abierto .eco-stage__canvas {
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  transition: -webkit-mask-image var(--eco-t-panel) linear,
    mask-image var(--eco-t-panel) linear;
}

body.ecosistema-page {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
}

@media (prefers-reduced-motion: reduce) {
  body.ecosistema-page {
    scroll-behavior: auto;
  }
}