/* Allnity — allnity.com. Sin recursos de terceros. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --accent: #3d35c9;
  --accent-hover: #3129a8;
  --accent-fg: #ffffff;
  --accent-soft: #e7e6fa;
  --ink: #1f2547;
  --paper: #f4f5fa;
  --surface: #ffffff;
  --surface-2: #eceef6;
  --line: #dcdfeb;
  --muted: #5a6078;
  --cyan: #1ba9e0;
  --cyan-light: #8fe6ff;
  --focus: #3d35c9;
  --deep: #1f2547;
  --chip-bg: #3d35c9;
  --radius: 18px;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}
@media not all {
  :root {
    --accent: #9a95f7;
    --accent-hover: #b4b0fa;
    --accent-fg: #14183a;
    --accent-soft: #2c3163;
    --ink: #eef0fa;
    --paper: #12152b;
    --surface: #1b1f3b;
    --surface-2: #262b4e;
    --line: #353c66;
    --muted: #b3b8d2;
    --focus: #8fe6ff;
    --deep: #0c0f22;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.15; font-weight: 600; margin: 0 0 .5em; }

.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 10;
  background: var(--surface); color: var(--ink); padding: .6rem 1rem; border-radius: 999px;
  border: 2px solid var(--accent); font-weight: 600;
}
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40rem) { .wrap { padding: 0 1.5rem; } }

/* Cabecera */
.site-header { padding: 1rem 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.brand { display: inline-flex; flex-shrink: 0; }
.brand img { width: 112px; }
@media (min-width: 40rem) { .brand img { width: 132px; } }
.header-nav { display: flex; align-items: center; gap: .5rem; }
.lang { font-size: .95rem; font-weight: 600; color: var(--ink); text-decoration: none; padding: .5rem .75rem; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.lang:hover { background: var(--surface-2); color: var(--ink); }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .6rem 1.25rem; border-radius: 999px;
  font: 600 1rem/1.2 var(--sans); text-decoration: none; border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-fg); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

/* Portada */
.hero { padding: 2rem 0 1rem; text-align: center; overflow: hidden; }
@media (min-width: 60rem) { .hero { padding: 2.5rem 0 1rem; } }
.hero h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); letter-spacing: -.015em; max-width: 24ch; margin-inline: auto; }
.lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--muted); max-width: 38rem; margin: 0 auto; }

/* Globo */
.globe { position: relative; width: min(100%, 46rem); aspect-ratio: 1; margin: 0 auto -10%; }
.globe canvas, .globe-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe-chips { position: absolute; inset: 0; pointer-events: none; }
.globe-chip {
  position: absolute; left: 0; top: 0; opacity: 0;
  width: clamp(2rem, 6vw, 2.6rem); height: clamp(2rem, 6vw, 2.6rem); border-radius: 50%;
  display: grid; place-items: center; background: var(--chip-bg); color: #ffffff;
  border: 3px solid var(--paper); will-change: transform, opacity;
}
.globe-chip svg { width: 52%; height: 52%; }
.globe-chip-accent { background: var(--cyan); color: #1f2547; }
.globe:not(.globe-ready) .globe-chips { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Puntos */
.values { padding: 0 0 4rem; position: relative; }
.values h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 1.5rem; }
.value-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .value-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .value-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.value { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.value h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.value p { margin: 0; color: var(--muted); }
.value-icon { width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 1rem; }
.value-icon svg { width: 1.35rem; height: 1.35rem; }

/* Páginas sencillas */
.page { padding: 2rem 0 4rem; }
.page .wrap { max-width: 44rem; }
.page h1 { font-size: clamp(2rem, 5vw, 2.75rem); }
.page h2 { font-size: 1.35rem; margin-top: 1.75rem; }
.note { display: inline-block; font-size: .9rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: .25rem .8rem; margin: 0 0 1rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 2rem 1.5rem; text-align: center; display: grid; gap: 1rem; justify-items: center; }
@media (min-width: 40rem) { .panel { padding: 3rem; } }
.panel img { width: 72px; }
.panel h1 { margin: 0; }
.panel p { margin: 0; color: var(--muted); max-width: 30rem; }
.back { font-weight: 600; }

/* Pie */
.site-footer { border-top: 1px solid var(--line); padding: 2rem 0; font-size: .95rem; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Más aire arriba: el logo no va pegado al borde. El pie siempre abajo y, en las páginas cortas
   (acceso, legal), el contenido centrado en el alto que queda en lugar de un hueco vacío. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
.site-header { padding: clamp(1.25rem, 3vw, 2rem) 0 1rem; }
.page { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 6vh, 4rem) 0; }
.invite-note { padding: 0 0 3rem; text-align: center; }
.invite-note p { margin: 0 auto; max-width: none; color: var(--muted); font-size: .95rem; }
.acronyms { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.acronyms li { font-size: .8rem; font-weight: 600; letter-spacing: .04em; padding: .2rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #3d35c9) 12%, transparent); color: var(--ink); }
.acronyms abbr { text-decoration: none; cursor: help; }

/* Historia «One year. One platform.»: línea de tiempo vertical con un icono por paso. */
.story { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.story .wrap { max-width: 46rem; }
.story h2 { text-align: center; font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 .5rem; }
.story-lead { text-align: center; color: var(--muted); margin: 0 auto 2.5rem; }
.story-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.story-steps::before { content: ""; position: absolute; inset-block: 1.25rem; inset-inline-start: 1.25rem; width: 2px;
  background: linear-gradient(var(--accent), #1ba9e0); opacity: .35; }
.story-step { position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding-block-end: 1.75rem; }
.story-step:last-child { padding-block-end: 0; }
.story-icon { width: 2.5rem; height: 2.5rem; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); color: #fff; box-shadow: 0 0 0 6px var(--paper); position: relative; z-index: 1; }
.story-icon svg { width: 1.2rem; height: 1.2rem; }
.story-step h3 { margin: .35rem 0 .25rem; font-size: 1.1rem; }
.story-step p { margin: 0; color: var(--muted); }
.story-end { text-align: center; margin: 2.5rem auto 0; font-size: 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .story-step { animation: story-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    @keyframes story-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
  }
}

/* Fondo de malla de color detrás del globo (efecto propio, sin servicios externos): manchas
   difuminadas lila y azul muy claros sobre lavanda que se mueven despacio y siguen un poco al
   ratón. Quieto con «reducir movimiento». */
body { position: relative; isolation: isolate; }
/* La malla cubre la cabecera y la portada (alto que pone mesh.js; sin él, una pantalla). */
.mesh { position: absolute; top: 0; left: 0; right: 0; height: var(--mesh-h, 100vh); z-index: -1; pointer-events: none; overflow: hidden;
  background: #c1caff; --mx: 0; --my: 0; }
.mesh::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 70%, var(--paper) 100%); }
.mesh span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .95;
  transform: translate(calc(var(--mx) * 30px), calc(var(--my) * 30px)); transition: transform .8s ease-out; }
.mesh span:nth-child(1) { width: 70%; aspect-ratio: 1; left: -15%; top: -20%; background: #eae7ff; }
.mesh span:nth-child(2) { width: 65%; aspect-ratio: 1; right: -15%; top: -10%; background: #eff8ff; }
.mesh span:nth-child(3) { width: 55%; aspect-ratio: 1; left: 22%; top: 35%; background: #eae7ff; opacity: .8; }
.mesh span:nth-child(4) { width: 45%; aspect-ratio: 1; right: 5%; top: 50%; background: #eff8ff; opacity: .75; }
@media not all {
  .mesh { background: #161a36; }
  .mesh span:nth-child(odd) { background: #3d35c9; opacity: .35; }
  .mesh span:nth-child(even) { background: #1ba9e0; opacity: .22; }
}
@media (prefers-reduced-motion: no-preference) {
  .mesh span:nth-child(1) { animation: mesh-a 24s ease-in-out infinite alternate; }
  .mesh span:nth-child(2) { animation: mesh-b 30s ease-in-out infinite alternate; }
  .mesh span:nth-child(3) { animation: mesh-c 20s ease-in-out infinite alternate; }
  .mesh span:nth-child(4) { animation: mesh-b 26s ease-in-out infinite alternate-reverse; }
  @keyframes mesh-a { to { translate: 12% 10%; scale: 1.15; } }
  @keyframes mesh-b { to { translate: -12% 8%; scale: .9; } }
  @keyframes mesh-c { to { translate: 8% -12%; scale: 1.2; } }
}

/* Efecto cristal (como el tema Cristal de la app): tarjetas translúcidas sobre la malla de color. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .value {
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .75);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 10px 30px -12px rgba(31, 37, 71, .18), inset 0 1px 0 rgba(255, 255, 255, .8);
  }
  .value p { color: #3f4566; }
  @media not all {
    .value { background: rgba(27, 31, 59, .55); border-color: rgba(143, 230, 255, .14);
      box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
    .value p { color: #c7cbe0; }
  }
}
.site-footer { padding: 1rem 0; }
.invite-note { padding-bottom: 1.5rem; }
/* Arriba, bajo el logo y el titular, la malla se aclara casi a blanco y se intensifica hacia el globo. */
.mesh::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(255,255,255,.92) 0%, rgba(255,255,255,.6) 18%, rgba(255,255,255,0) 42%); }
@media not all {
  .mesh::before { background: linear-gradient(to bottom, rgba(18,21,43,.85) 0%, rgba(18,21,43,0) 40%); }
}
/* Al pasar el ratón las tarjetas «despegan»: suben, la sombra crece y el icono se inclina un poco. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .value { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; will-change: transform; }
  .value-icon { transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s ease, color .35s ease; }
  .value:hover { transform: translateY(-8px); border-color: rgba(61, 53, 201, .35);
    box-shadow: 0 24px 40px -18px rgba(61, 53, 201, .35), inset 0 1px 0 rgba(255,255,255,.9); }
  .value:hover .value-icon { transform: translate(3px, -3px) rotate(-8deg); background: var(--accent); color: #fff; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .value:hover { border-color: rgba(61, 53, 201, .35); }
}
.site-footer { padding: .55rem 0; font-size: .85rem; } .site-footer p, .site-footer li { line-height: 1.4; }
/* Icono: movimiento más suave al pasar el ratón. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .value:hover .value-icon { transform: translateY(-2px); background: var(--accent-soft); color: var(--accent); }
}
/* La frase bajo el titular en una línea en pantallas anchas (sin «place.» suelto). */
.hero h1 + p { max-width: 44rem; margin-inline: auto; text-wrap: balance; }
.imprint { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0 0 1rem; }
.imprint dt { font-weight: 600; color: var(--ink); }
.imprint dd { margin: 0; color: var(--muted); }
@media (max-width: 30rem) { .imprint { grid-template-columns: 1fr; } .imprint dd { margin-bottom: .5rem; } }