/* Nosotros: la historia humana de Operia */
.nav-links a[aria-current="page"] { color: var(--hueso); }

/* ===== Historia: escena fija mientras se recorre el scroll ===== */
.historia { position: relative; height: 340vh; }
.historia-escena {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
  padding: 110px var(--gutter) 90px;
}
.historia-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }
.historia-textos { display: grid; max-width: var(--max); }
.capitulo {
  grid-area: 1 / 1; align-self: center;
  opacity: 0; transform: translateY(24px); visibility: hidden;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .6s;
}
.capitulo.is-on { opacity: 1; transform: none; visibility: visible; transition-delay: .1s, .1s, 0s; }
.capitulo h1, .capitulo h2 {
  font-weight: 600; font-size: clamp(2.5rem, 5.6vw, 5.5rem);
  line-height: 1; letter-spacing: -.045em; max-width: 14ch; text-wrap: balance;
}
.capitulo p { margin-top: 28px; max-width: 40ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--ceniza); }

/* Avance de la historia: tres tramos que se llenan */
.historia-avance { position: absolute; left: var(--gutter); bottom: 34px; display: flex; gap: 8px; }
.historia-avance i { position: relative; width: 44px; height: 3px; border-radius: 2px; background: var(--linea); overflow: hidden; }
.historia-avance i::after {
  content: ""; position: absolute; inset: 0; background: var(--ember);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}

/* ===== El nombre ===== */
.nombre, .metodo, .equipo, .lugar, .valores, .cierre {
  max-width: var(--max); margin: 0 auto; padding: clamp(80px, 12vw, 160px) var(--gutter) 0;
}
.nombre-palabra {
  font-weight: 700; font-size: clamp(2.75rem, 11vw, 11.5rem);
  line-height: .95; letter-spacing: -.055em; white-space: nowrap;
}
.np { display: inline-block; vertical-align: top; }
.np-acion, .np-mas {
  overflow: hidden; max-width: 4.6em;
  transition: max-width 1s cubic-bezier(.7, 0, .2, 1), opacity .6s ease, margin 1s cubic-bezier(.7, 0, .2, 1);
}
.np-acion { color: var(--ceniza); }
.np-mas { max-width: .9em; margin: 0 .12em; color: var(--sol); font-weight: 400; }
.np-ia { display: inline-grid; margin-left: .05em; } /* sin esto la "i" se encima con la "r" */
.np-ia b { grid-area: 1 / 1; font-weight: inherit; transition: opacity .5s ease .7s, transform .7s cubic-bezier(.2, .8, .2, 1) .7s; }
.np-ia-minus {
  opacity: 0; transform: translateY(.15em);
  background: var(--ember); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nombre.is-on .np-acion { max-width: 0; opacity: 0; }
.nombre.is-on .np-mas { max-width: 0; margin: 0; opacity: 0; transition-delay: .15s; }
.nombre.is-on .np-ia-mayus { opacity: 0; transform: translateY(-.15em); }
.nombre.is-on .np-ia-minus { opacity: 1; transform: none; }
.nombre-texto { margin-top: 40px; max-width: 52ch; font: 400 clamp(1.125rem, 1.7vw, 1.4rem)/1.5 var(--display); letter-spacing: -.01em; color: var(--ceniza); }
.nombre-texto strong { color: var(--hueso); font-weight: 600; }

/* ===== Metodología: el arnés ===== */
.metodo, .equipo, .lugar {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.metodo h2, .equipo h2, .lugar h2, .valores h2, .cierre h2 {
  font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1.04; letter-spacing: -.035em; text-wrap: balance;
}
.metodo h2 { font-size: clamp(2rem, 3.3vw, 3rem); }
.metodo-copy p, .equipo-copy p, .lugar-copy p { margin-top: 22px; color: var(--ceniza); max-width: 46ch; }
.metodo-copy h2 + p, .equipo-copy h2 + p, .lugar-copy h2 + p { margin-top: 28px; }
.equipo-ejemplo {
  padding: 18px 22px; border-radius: var(--radius-s); color: var(--hueso);
  background: linear-gradient(90deg, rgba(252, 74, 3, .12), transparent 80%);
  box-shadow: inset 2px 0 0 var(--llama);
}

.arnes, .mapa {
  margin: 0; border-radius: var(--radius-l); padding: clamp(24px, 3.4vw, 44px);
  background: radial-gradient(110% 80% at 100% 0%, rgba(252, 74, 3, .14), transparent 55%), var(--carbon);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.arnes-pasos {
  --ciclo: 4.8s;
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
}
/* Riel y pulso que lo recorre */
.arnes-pasos::before {
  content: ""; position: absolute; left: 21px; top: 26px; bottom: 26px; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, var(--linea), rgba(252, 74, 3, .5), var(--linea));
}
.arnes-pasos::after {
  content: ""; position: absolute; left: 21px; top: 26px; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 14px 5px var(--sol);
  animation: arnes-pulso var(--ciclo) linear infinite;
}
@keyframes arnes-pulso {
  0% { top: 26px; opacity: 0; } 4% { opacity: 1; }
  85% { top: calc(100% - 26px); opacity: 1; } 92%, 100% { top: calc(100% - 26px); opacity: 0; }
}
.arnes-pasos li {
  position: relative; display: flex; align-items: center; min-height: 52px; padding-left: 58px;
  font: 500 1.0625rem/1.2 var(--body);
}
.arnes-pasos li::before {
  content: ""; position: absolute; left: 21px; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--noche); box-shadow: inset 0 0 0 2px var(--borde-campo);
  animation: arnes-paso var(--ciclo) ease-out infinite; animation-delay: calc(var(--i) * var(--ciclo) * .17);
}
.arnes-pasos li span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 12px;
  background: #15100c; box-shadow: inset 0 0 0 1px var(--linea);
}
.arnes-pasos li small { margin-left: 16px; font-size: .875rem; color: var(--ceniza); }
.arnes-pasos li.es-ia span { background: var(--ember); color: var(--noche); font-weight: 600; box-shadow: 0 0 34px -6px rgba(252, 74, 3, .7); }
.arnes-pasos li:nth-child(1) { --i: 0; } .arnes-pasos li:nth-child(2) { --i: 1; } .arnes-pasos li:nth-child(3) { --i: 2; }
.arnes-pasos li:nth-child(4) { --i: 3; } .arnes-pasos li:nth-child(5) { --i: 4; } .arnes-pasos li:nth-child(6) { --i: 5; }
@keyframes arnes-paso {
  0% { background: var(--sol); box-shadow: 0 0 0 2px var(--sol), 0 0 18px 4px rgba(255, 138, 18, .7); }
  30%, 100% { background: var(--noche); box-shadow: inset 0 0 0 2px var(--borde-campo); }
}
.arnes figcaption { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; font-size: .875rem; color: var(--ceniza); }
.leyenda { display: inline-flex; align-items: center; gap: 8px; }
.leyenda::before { content: ""; width: 14px; height: 14px; border-radius: 4px; }
.leyenda-regla::before { background: #15100c; box-shadow: inset 0 0 0 1px var(--borde-campo); }
.leyenda-ia::before { background: var(--ember); }

/* ===== Equipo humano y artificial ===== */
.orbita { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; margin-inline: auto; }
.orbita-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbita-lineas .base { stroke: var(--linea); stroke-width: 1.5; }
.orbita-lineas .flujo {
  stroke: var(--sol); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 10 400;
  animation: orbita-flujo 3.2s linear infinite; animation-delay: var(--d);
}
@keyframes orbita-flujo { from { stroke-dashoffset: 10; } to { stroke-dashoffset: -260; } }
.orbita-lineas .anillo { fill: none; stroke: rgba(252, 74, 3, .22); stroke-width: 1; stroke-dasharray: 2 9; transform-origin: 300px 300px; animation: orbita-gira 80s linear infinite; }
@keyframes orbita-gira { to { transform: rotate(360deg); } }
.orbita-centro {
  position: absolute; left: 50%; top: 50%; width: 31%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-content: center; text-align: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a1609, #0b0705 70%);
  box-shadow: inset 0 0 0 1.5px var(--llama), 0 0 60px -10px rgba(252, 74, 3, .6);
}
.orbita-centro strong { max-width: 7em; margin-inline: auto; font: 600 clamp(1rem, 2vw, 1.5rem)/1.1 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.orbita-centro span { margin-top: 4px; font-size: .875rem; color: var(--ceniza); }
.orbita-agentes { list-style: none; margin: 0; padding: 0; }
.orbita-agentes li {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%);
  display: grid; justify-items: center; padding: 10px 16px; border-radius: 14px; white-space: nowrap;
  background: var(--carbon); box-shadow: inset 0 0 0 1px var(--linea);
  animation: orbita-ping 3.2s linear infinite; animation-delay: var(--d);
}
/* Se enciende cuando le llega el pulso desde el centro */
@keyframes orbita-ping {
  0%, 84%, 100% { box-shadow: inset 0 0 0 1px var(--linea); }
  92% { box-shadow: inset 0 0 0 1px var(--llama), 0 0 26px -4px rgba(252, 74, 3, .7); }
}
.orbita-agentes strong { font: 600 1rem/1.2 var(--display); }
.orbita-agentes span { font-size: .8125rem; color: var(--ceniza); }

/* ===== Dónde estamos ===== */
.mapa svg { display: block; width: 100%; height: auto; }
.mapa-tierra { fill: url(#mapa-tierra-g); }
.mapa-costa { fill: none; stroke: var(--borde-campo); stroke-width: 1.5; }
.mapa-frontera { fill: none; stroke: var(--ceniza); stroke-width: 1; stroke-dasharray: 4 6; }
.mapa-nota { fill: var(--ceniza); font: 400 12px var(--body); text-anchor: middle; }
.mapa-mar { text-anchor: start; font-style: italic; }
.pin-punto { fill: url(#mapa-ember); }
.pin-onda {
  fill: none; stroke: var(--llama); stroke-width: 1.5; transform-box: fill-box; transform-origin: center;
  animation: pin-onda 2.4s ease-out infinite; animation-delay: var(--d);
}
@keyframes pin-onda { from { transform: scale(.6); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.pin text { fill: var(--hueso); font: 600 16px var(--display); }
.mapa figcaption { margin-top: 18px; font-size: .875rem; color: var(--ceniza); }

/* ===== Valores ===== */
.valores-lista {
  list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 6vw, 96px);
}
.valores-lista li { position: relative; isolation: isolate; padding: 32px 0 36px; border-top: 1px solid var(--linea); }
.valores-lista h3 { font-weight: 600; font-size: clamp(1.375rem, 2.2vw, 1.875rem); letter-spacing: -.02em; line-height: 1.15; }
.valores-lista p { margin-top: 12px; color: var(--ceniza); max-width: 42ch; }
/* Rayas de brasa al pasar el cursor, como en el resto del sitio */
.valores-lista li::before {
  content: ""; position: absolute; z-index: -1; inset: 8px -18px; pointer-events: none; border-radius: 18px;
  background:
    repeating-linear-gradient(135deg, rgba(252, 74, 3, .55) 0 1.5px, transparent 1.5px 8.5px) 0 0 / 12.02px 12.02px,
    linear-gradient(135deg, rgba(110, 30, 4, .55), rgba(45, 12, 2, .45));
  box-shadow: inset 0 0 0 1px rgba(252, 74, 3, .35), 0 0 60px -20px rgba(252, 74, 3, .5);
  opacity: 0; transform: scale(.985); transition: opacity .35s ease, transform .35s ease;
  animation: rayas 1.2s linear infinite; animation-play-state: paused;
}
.valores-lista li:hover::before { opacity: 1; transform: none; animation-play-state: running; }

/* ===== Cierre ===== */
.cierre { padding-bottom: clamp(96px, 13vw, 180px); }
.cierre h2 { font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.04em; max-width: 16ch; }
.cierre p { margin-top: 24px; color: var(--ceniza); max-width: 46ch; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .metodo, .equipo, .lugar { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
  .historia { height: 300vh; }
  .historia-escena { grid-template-columns: 1fr; align-items: end; padding: 0 var(--gutter) 104px; }
  .capitulo { align-self: end; }
  .capitulo h1, .capitulo h2 { font-size: clamp(2rem, 9vw, 2.75rem); max-width: 14ch; }
  .capitulo p { margin-top: 16px; font-size: 1rem; }
  .historia-avance { bottom: 66px; }
  .valores-lista { grid-template-columns: 1fr; }
  .nombre-palabra { font-size: 13.5vw; }
  .arnes-pasos li { flex-wrap: wrap; padding-block: 4px; }
  .arnes-pasos li small { flex-basis: 100%; margin: 6px 0 0 4px; }
  .orbita-agentes li { padding: 8px 12px; }
  .orbita-agentes strong { font-size: .875rem; }
  .orbita-agentes span { font-size: .75rem; }
  .orbita-centro span { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .arnes-pasos::after { display: none; }
  .arnes-pasos li::before, .orbita-lineas .flujo, .orbita-lineas .anillo, .pin-onda, .valores-lista li::before, .orbita-agentes li { animation: none; }
  .orbita-lineas .flujo { display: none; }
}