:root {
  --ink:      #05060f;
  --ink-2:    #0a1030;
  --blue-deep:#101f6b;
  --blue:     #2b45d8;
  --blue-hi:  #6f9dff;
  --pink:     #ff3d8b;
  --paper:    #eef2ff;
  --muted:    #a6b3d9;
  --line:     #ffffff1f;
  --card:     #0c143a99;
  --wrap:     68rem;

  /* The logo mark: a window, narrower at the top than at the bottom.
     Every frame on this page is cut from this one shape. */
  --window: polygon(1.15rem 0, calc(100% - 1.15rem) 0, 100% 100%, 0 100%);
  /* El mismo trapecio desplazado 2.5px PERPENDICULAR a cada lado, no con un
     `inset` uniforme: sobre un lado inclinado, moverse 2.5px en horizontal y
     vertical a la vez deja un borde de 3.16px. Calculado para 3.5rem de alto
     y 1.15rem de inclinación; si cambia la altura del botón, recalcular. */
  --window-inner: polygon(17.7px 0, calc(100% - 17.7px) 0,
                          calc(100% - 0.95px) 100%, 0.95px 100%);

  --display: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* The page sits on the brand's vertical gradient: near-black at the top,
   royal blue through the middle, back to near-black at the footer. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 40rem at 50% 12%, #16225e66, transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 22%, var(--blue-deep) 55%, var(--ink-2) 88%, var(--ink) 100%);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blue-hi); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue-hi);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 0.5rem; top: -4rem;
  z-index: 10; padding: 0.6rem 1rem;
  background: var(--paper); color: var(--ink);
  border-radius: 0 0 0.5rem 0.5rem; text-decoration: none;
}
.skip:focus { top: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* ---------- header ---------- */

/* The header floats over the hero artwork. The artwork's top band is the
   darkest part of the image, so white type stays legible without a scrim. */
.top {
  position: absolute; inset: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  padding: 1.5rem 0;
}
/* The delivered PNG is white artwork on an opaque black field, not on
   transparency. `screen` drops the black and keeps the white. */
.top img { width: 9.5rem; mix-blend-mode: screen; }

.top nav {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem;
  font-family: var(--display);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.top nav a { color: var(--muted); text-decoration: none; transition: color .2s; }
.top nav a:hover { color: var(--paper); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: grid; align-items: center;
  min-height: min(40rem, 94svh);
  padding: 8rem 0 4rem;
  text-align: center;
}

/* Full-bleed. The delivered artwork has the title, the tagline and the date
   baked into it — all of it in the middle. Anchoring to the left edge and
   zooming past the first lettering keeps the light ribbons, which are the
   brand, and leaves the words on this page as the only copy of the words.
   The ribbons carry no fine detail, so the upscale reads as depth of field
   rather than as a low-resolution image. */
/* The artwork dissolves at the bottom rather than fading to black. Fading
   to a colour leaves a seam wherever the page gradient behind it is not
   exactly that colour; dissolving cannot. */
.hero-art {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
.hero-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 0 50%;
  transform-origin: 0 50%;
  transform: scale(2.2);
  filter: blur(4px) saturate(1.25);
}
/* Darkens the artwork enough to hold text, and fades it into the page. */
.hero-art::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* Sits directly behind the headline and the invitation, so pink type
       never lands on a pink ribbon. */
    radial-gradient(46% 34% at 50% 30%, #05060fbf, transparent 72%),
    radial-gradient(72% 58% at 50% 45%, #05060f00, #05060fbf 100%),
    linear-gradient(180deg, #05060fd9 0%, #05060f40 32%, #05060f73 72%, #05060f8c 100%);
}

/* Positioned, with no z-index, so it paints over the absolutely positioned
   artwork without opening a stacking context that would trap the logo's
   blend mode. */
.hero-copy { position: relative; }

.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.75rem, 1.2rem + 7vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero h1 span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.32em; font-weight: 500;
  letter-spacing: 0.42em; text-indent: 0.42em;
  color: var(--blue-hi);
}

.invite {
  max-width: 34ch;
  margin: 2rem auto 0;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--muted);
}
.invite em { font-style: normal; color: #ff7aad; font-weight: 600; }

/* ---------- the actions ---------- */

/* Two destinations, unequal weight. The tour is what the remote visitor came
   for; laboratorios is supporting content. The trapezoid stays as the shape
   of the primary action — the slant is set in rem, not %, so the angle
   matches the logo at any button width instead of shearing with it. */
.actions {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: stretch;
  gap: 0.875rem;
  margin-top: 2.75rem;
}

.window, .ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.5rem;
  padding: 0 2rem;
  font-family: var(--display);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--paper);
}

.window {
  position: relative;
  clip-path: var(--window);
  background: linear-gradient(115deg, var(--blue-hi), var(--pink) 55%, var(--blue-hi));
  transition: transform .2s cubic-bezier(.2,.7,.3,1);
}
/* The pane inside the frame. Flat: the gradient edge is the whole idea. */
.window::before {
  content: "";
  position: absolute; inset: 2.5px;
  clip-path: var(--window-inner);
  background: #0b1233;
}
.window b { position: relative; font-weight: 700; }

.ghost {
  border: 1px solid #ffffff42;
  border-radius: 0.375rem;
  transition: border-color .2s, background-color .2s,
              transform .2s cubic-bezier(.2,.7,.3,1);
}

/* Gated: on touch, :hover sticks after the tap. */
@media (hover: hover) and (pointer: fine) {
  .window:hover { transform: translateY(-2px); }
  .ghost:hover { border-color: var(--blue-hi); background-color: #6f9dff14; }
}

/* Press feedback, on every input type. */
.window:active, .ghost:active { transform: scale(0.97); }

/* ---------- the facts ---------- */

.facts {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 0.5rem 1.5rem;
  margin: 2.75rem 0 0;
  font-family: var(--display);
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.facts span + span::before {
  content: "";
  display: inline-block; vertical-align: middle;
  width: 0.3125rem; aspect-ratio: 1;
  margin-right: 1.5rem;
  border-radius: 50%;
  background: var(--pink);
}
.facts b { font-weight: 600; color: #fff; }

/* ---------- sections ---------- */

.band { padding: 5rem 0; }
.band + .band { padding-top: 0; }

h2 {
  margin: 0 0 3rem;
  font-family: var(--display);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--blue-hi);
  text-align: center;
}
/* A streak of light, the artwork's motif at the smallest scale. */
h2::after {
  content: "";
  display: block;
  width: min(22rem, 70%); height: 2px;
  margin: 1.25rem auto 0;
  background: linear-gradient(90deg, transparent, var(--blue-hi) 22%, var(--pink) 50%, var(--blue-hi) 78%, transparent);
  filter: blur(0.5px);
  opacity: .85;
}

/* ---------- the four activities ---------- */

/* Numbered, not boxed. The ordinal is the only ornament. */
.pillars {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.pillars li {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding: 1.75rem 1.5rem 1.75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem; line-height: 1.45;
}
.pillars b {
  flex: none;
  font-family: var(--display);
  font-size: 2.25rem; font-weight: 800;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--blue-hi);
}

/* ---------- purpose ---------- */

.purpose {
  max-width: 34ch; margin-inline: auto;
  text-align: center;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.4;
  color: var(--muted);
  font-weight: 400;
}
.purpose strong { color: var(--paper); font-weight: 600; }

/* ---------- programme ---------- */

.slot {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0 2.75rem;
  padding-bottom: 3.5rem;
}
.slot:last-of-type { padding-bottom: 0; }

/* The rail is a light streak, not a hairline. The node sits on it. */
.slot .when {
  text-align: right;
  padding-right: 1.5rem;
  position: relative;
}
.slot .when::before {
  content: "";
  position: absolute; right: 0; top: 0.5rem; bottom: -3.5rem;
  width: 1px;
  background: linear-gradient(180deg, var(--blue-hi), #6f9dff26 65%, transparent);
}
.slot:last-of-type .when::before { bottom: auto; height: 4rem; }
.slot .when::after {
  content: "";
  position: absolute; right: -0.3125rem; top: 0.75rem;
  width: 0.625rem; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 0.3125rem #ff3d8b1f;
}
.slot .when b {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
  font-weight: 800; letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.slot .when span {
  display: block; margin-top: 0.65rem;
  font-size: 0.75rem; line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.slot h3 {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  font-weight: 800; letter-spacing: -0.01em;
  line-height: 1.15;
}
.slot h3 em { font-style: normal; color: var(--pink); }

.slot h4 {
  margin: 1.75rem 0 0.5rem;
  font-family: var(--display);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--blue-hi);
}
.slot h4:first-of-type { margin-top: 0; }

.slot ul { margin: 0; padding-left: 1.25rem; color: var(--muted); }
.slot li { margin-bottom: 0.5rem; }
.slot li::marker { color: var(--pink); }
.slot p { margin: 0.5rem 0 0; color: var(--muted); }

.slot .who { color: var(--paper); font-weight: 600; }
.slot .role { color: var(--muted); font-weight: 400; }

/* ---------- footer ---------- */

.closing {
  padding: 5rem 0 4.5rem;
  text-align: center;
}
.closing p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 800; letter-spacing: -0.02em;
  line-height: 1;
  color: var(--paper);
}


footer {
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}
footer p { margin: 0.4rem 0; }
footer .orgs {
  font-family: var(--display);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper);
}

/* ---------- narrow ---------- */

@media (max-width: 46rem) {
  /* In flow, not overlaid — but still positioned, so it paints above the
     artwork instead of underneath it. */
  .top { position: relative; padding: 1.5rem 0 2.5rem; }
  .top img { width: 8rem; }
  .hero { min-height: 0; padding: 0 0 3.5rem; }
}

@media (max-width: 40rem) {
  .pillars li { padding-right: 0; }
  .slot { grid-template-columns: 1fr; gap: 0; }
  .slot .when {
    text-align: left;
    padding: 0 0 0 1.5rem;
    margin: 0 0 1.25rem;
  }
  .slot .when::before { right: auto; left: 0; bottom: -3.5rem; }
  .slot .when::after { right: auto; left: -0.3125rem; }
  .slot > div:last-child { padding-left: 1.5rem; border-left: 1px solid var(--line); }
  .slot:last-of-type .when::before { height: 100%; }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* The light streams keep moving, slowly, the way they do in the artwork. */
  .hero-art img { animation: drift 44s ease-in-out infinite alternate; }

  /* Scroll-driven reveals with no script and no observer. Guarded, because
     where `view()` is missing the content must simply be visible. */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 30%;
    }
  }
}

/* Fewer and gentler, not none: the press still answers, the travel stops. */
@media (prefers-reduced-motion: reduce) {
  .window:hover { transform: none; }
  .window:active, .ghost:active { transform: scale(0.97); }
}

@keyframes drift {
  from { transform: scale(2.2) translate3d(0, 0, 0); }
  to   { transform: scale(2.42) translate3d(-2%, -1.5%, 0); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(1.75rem); }
  to   { opacity: 1; transform: none; }
}

/* ================= subpáginas ================= */

/* Las subpáginas no tienen hero detrás de la cabecera, así que ésta va en
   flujo normal en vez de flotar sobre la imagen. */
.top.plain {
  position: static;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.top > a { display: block; }
.top nav a[aria-current="page"] { color: var(--paper); }

.page-head { padding: 4.5rem 0 3.5rem; }

.page-head h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.page-head h1 span {
  font-size: 0.42em; font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--blue-hi);
  text-transform: uppercase;
}

.lead {
  max-width: 46ch;
  margin: 1.5rem 0 0;
  font-size: 1.125rem;
  color: var(--muted);
}

/* ---------- laboratorios destacados ---------- */

/* Una tarjeta por recorrido. La miniatura es la del propio nodo del recorrido,
   así que la portada de la tarjeta y lo primero que ve el visitante al abrirla
   son la misma imagen. */
.cards {
  list-style: none; margin: 0 0 5rem; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
}
.cards a {
  display: block; height: 100%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--paper);
  text-decoration: none;
  transition: border-color .2s, transform .2s cubic-bezier(.2,.7,.3,1);
}
.cards img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.cards b {
  display: block; padding: 0.9rem 1rem 0;
  font-family: var(--display);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.35;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.cards span {
  display: block; padding: 0.35rem 1rem 1rem;
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.cards b:last-child { padding-bottom: 1rem; }
.cards a:active { transform: scale(0.99); }

@media (hover: hover) and (pointer: fine) {
  .cards a:hover { border-color: var(--pink); }
}
@media (prefers-reduced-motion: reduce) {
  .cards a:active { transform: none; }
}

/* ---------- laboratorios ---------- */

.fac { margin-top: 3.5rem; }

/* El h2 global es un rótulo centrado con su raya de luz. Repetido 18 veces
   sería ruido, así que aquí es una etiqueta de columna alineada a la izquierda. */
.fac h2 {
  display: flex; align-items: baseline; gap: 0.75rem;
  margin: 0 0 0.5rem;
  text-align: left;
  font-size: 0.75rem; letter-spacing: 0.18em;
}
.fac h2::after { content: none; }
.fac .count {
  font-size: 0.6875rem; letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 500;
}

.labs {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.labs li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.labs .name {
  font-size: 0.9375rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Sólo aparece en los laboratorios que traen URL de YouTube. Un laboratorio
   sin video no muestra nada: no se promete un enlace que no existe. */
.labs .play {
  flex: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--blue-hi);
  text-decoration: none;
  font-family: var(--display);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color .2s;
}
.labs .play svg { width: 1.25rem; height: 1.25rem; }
.labs .play:hover { color: var(--pink); }

/* Un laboratorio puede traer las dos cosas, ninguna, o una sola. */
.labs .links {
  flex: none;
  display: inline-flex; align-items: center; gap: 1.5rem;
}

/* El recorrido 360° aparece en los laboratorios que tienen panorama. Casi
   todos son laboratorios sin video: el panorama cubre el hueco, no lo repite.
   Por eso se distingue del enlace de video en color, no sólo en texto. */
.labs .tour {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--pink);
  text-decoration: none;
  font-family: var(--display);
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color .2s;
}
.labs .tour svg { width: 1.25rem; height: 1.25rem; }
.labs .tour:hover { color: var(--blue-hi); }

@media (max-width: 34rem) {
  .labs li { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
  .labs .links { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
}

/* ---------- redes sociales ---------- */

.social {
  list-style: none;
  display: flex; justify-content: center; gap: 1rem;
  margin: 1.75rem 0 0; padding: 0;
}
.social a {
  display: grid; place-items: center;
  width: 2.5rem; aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  transition: color .2s, border-color .2s, transform .2s cubic-bezier(.2,.7,.3,1);
}
.social svg { width: 1.125rem; height: 1.125rem; }
.social a:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  .social a:hover { color: var(--paper); border-color: var(--blue-hi); }
}
@media (prefers-reduced-motion: reduce) {
  .social a:active { transform: none; }
}

/* Apilados, dos anchos distintos se leen como un descuido. */
@media (max-width: 30rem) {
  .actions { flex-direction: column; align-items: stretch; }
  .window, .ghost { width: 100%; }
}