/* Koi Ventures — efecto «globe», tres encuadres (fx/globe.js). Todo bajo html.fx-globe y .globe-on, que pone el script
   cuando arrancó bien: sin JS, con el efecto apagado o si el script falla, queda el contenido real solo (pages.css).
   Portfolio («Where our startups operate», full): globo a la izquierda; a la derecha la lista de países (selector) y, al
   lado de la fila activa, sus startups. Celular: globo arriba, más chico, y la lista abajo como acordeón.
   Home (destacadas, close) y Aceleradora («What we've achieved», compact): más abajo. */
html.fx-globe .where.globe-on { --globe-dot: #F08A42; } /* el naranja de los koi en navy: el mismo de los puntos del globo */
html.fx-globe .where.globe-on[data-theme="surface"] { --globe-dot: var(--accent); }
html.fx-globe .where.globe-on .where-body { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "map side" "map also"; column-gap: var(--s-6); align-items: start; margin-top: var(--s-5); }

/* el globo: lienzo cuadrado con un disco opaco del color del fondo detrás: un koi que pasa por debajo desaparece bajo el
   globo, sin mezclar sus glifos con los del mapa. No se suma a los obstáculos de site.js a propósito: con el globo y la
   lista como obstáculos casi no queda agua libre y un koi quedaba atrapado encima de la lista de países */
html.fx-globe .where.globe-on .where-map { grid-area: map; display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; pointer-events: auto; }
html.fx-globe .where.globe-on .where-map::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--disc, 94%); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--bg); }
html.fx-globe .where.globe-on .globe-cv { position: absolute; left: 0; top: 0; display: block; cursor: grab; touch-action: pan-y; }
html.fx-globe .where.globe-on .globe-cv.over { cursor: pointer; }
html.fx-globe .where.globe-on .globe-cv.dragging { cursor: grabbing; }
@media (hover: none), (pointer: coarse) { html.fx-globe .where.globe-on .globe-cv { cursor: auto; } }
/* rótulo del país activo: HTML encima del lienzo, con el velo del fondo como el resto del texto suelto */
html.fx-globe .where.globe-on .globe-tag { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; font-size: 13px; font-weight: 600; line-height: 1; color: var(--fg); text-shadow: 0 0 3px var(--bg), 0 0 10px var(--bg), 0 0 18px var(--bg); opacity: 0; transition: opacity .18s ease; }
html.fx-globe .where.globe-on .globe-tag.on { opacity: 1; }

/* la lista como selector: filas hairline con el nombre en 300 y la cantidad en mono; la activa en amarillo con su punto */
html.fx-globe .where.globe-on .where-side { grid-area: side; position: relative; }
html.fx-globe .where.globe-on .where-list { margin: 0; width: 48%; }
html.fx-globe .where.globe-on .where-c { display: block; padding: 0; }
html.fx-globe .where.globe-on .where-h { display: block; font-size: inherit; }
html.fx-globe .where.globe-on .where-btn { display: flex; width: 100%; min-height: 48px; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; margin: 0; border: 0; background: none; text-align: left; font-size: clamp(18px, 1.55vw, 22px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg); text-shadow: inherit; }
html.fx-globe .where.globe-on .where-btn .where-name { display: inline-flex; align-items: center; gap: 10px; transition: color .18s ease; }
html.fx-globe .where.globe-on .where-btn .where-name::before { content: ""; flex: none; width: 6px; height: 6px; margin-left: -16px; border-radius: 50%; background: var(--globe-dot); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .3s cubic-bezier(.16, 1, .3, 1); }
html.fx-globe .where.globe-on .where-c.on .where-name { color: var(--accent-2); }
html.fx-globe .where.globe-on .where-c.on .where-name::before { opacity: 1; transform: none; }
html.fx-globe .where.globe-on .where-c.on .where-btn .where-n { color: var(--fg); }
html.fx-globe .where.globe-on .where-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
/* las startups del país activo, al lado de su fila (site.js no las mueve: las ubica globe.js con top) */
html.fx-globe .where.globe-on .where-st { display: none; position: absolute; left: calc(48% + var(--s-5)); right: 0; top: 0; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0 16px; align-content: start; padding-top: 12px; }
html.fx-globe .where.globe-on .where-st li { line-height: 1.75; }
html.fx-globe .where.globe-on .where-c.on .where-st, html.fx-globe .where.globe-on .where-c.measure .where-st { display: grid; }
html.fx-globe .where.globe-on .where-c.measure .where-st { visibility: hidden; }
html.fx-globe .where.globe-on .where-hint { position: absolute; left: calc(48% + var(--s-5)); right: 0; top: 0; margin: 0; padding-top: 14px; font-size: 14px; color: var(--fg-2); }
html.fx-globe .where.globe-on.has-on .where-hint { display: none; }
html.fx-globe .where.globe-on .where-also { grid-area: also; align-self: start; margin: var(--s-4) 0 0; } /* debajo de la lista: los países fuera del globo */

/* tablet: el globo arriba, centrado; abajo la lista y las startups al lado */
@media (max-width: 1023.98px) {
  html.fx-globe .where.globe-on .where-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "map" "side" "also"; }
  html.fx-globe .where.globe-on .where-map { width: min(100%, 520px); justify-self: center; }
  html.fx-globe .where.globe-on .where-side { margin-top: var(--s-5); }
}
/* celular: acordeón (tocar un país abre sus startups debajo de la fila) */
@media (max-width: 759.98px) {
  html.fx-globe .where.globe-on .where-map { width: min(100%, 380px); }
  html.fx-globe .where.globe-on .where-list { width: auto; }
  html.fx-globe .where.globe-on .where-btn .where-n { margin-left: auto; }
  html.fx-globe .where.globe-on .where-btn .where-name::before { display: none; } /* sin margen para colgarlo: alcanzan el amarillo y el chevron */
  html.fx-globe .where.globe-on .where-btn::after { content: ""; flex: none; align-self: center; width: 7px; height: 7px; margin: -4px 2px 0 0; border-right: 1.5px solid var(--fg-2); border-bottom: 1.5px solid var(--fg-2); transform: rotate(45deg); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
  html.fx-globe .where.globe-on .where-c.on .where-btn::after { transform: translateY(3px) rotate(-135deg); }
  html.fx-globe .where.globe-on .where-st { position: static; padding: 0 0 14px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  html.fx-globe .where.globe-on .where-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.fx-globe .where.globe-on :is(.globe-tag, .where-name, .where-name::before, .where-btn::after) { transition: none; }
}

/* ───── home (close): el globo de cerca, a la derecha de la lista y cortado por el borde de la pantalla ───── */
html.fx-globe .highlights.globe-on { --hl-col: min(480px, 40vw); --globe-dot: #F08A42; }
html.fx-globe .highlights.globe-on .h-line { font-size: clamp(30px, 3.3vw, 48px); max-width: var(--hl-col); margin-bottom: var(--s-5); }
html.fx-globe .highlights.globe-on .hl-body { max-width: var(--hl-col); }
/* el lienzo va de la columna de texto al borde derecho de la pantalla y ocupa el alto de la sección. Recorta el disco
   (overflow: clip: el corte no ensancha la página) y lo funde arriba y abajo, donde se pasa de la sección. El disco opaco
   del color del fondo (::before, centro y radio en --gx/--gy/--gr, los pone globe.js) tapa a los koi que pasan debajo */
html.fx-globe .highlights.globe-on .hl-map {
  display: block; position: absolute; top: 0; bottom: 0; right: 0; left: calc(max(var(--s-4), (100% - 1152px) / 2) + var(--hl-col) + var(--s-6));
  overflow: clip; pointer-events: none;
  -webkit-mask: linear-gradient(transparent, #000 11%, #000 89%, transparent); mask: linear-gradient(transparent, #000 11%, #000 89%, transparent);
}
html.fx-globe .highlights.globe-on .hl-map::before { content: ""; position: absolute; left: calc(var(--gx, 50%) - var(--gr, 0px)); top: calc(var(--gy, 50%) - var(--gr, 0px)); width: calc(2 * var(--gr, 0px)); height: calc(2 * var(--gr, 0px)); border-radius: 50%; background: var(--bg); }
html.fx-globe .highlights.globe-on .hl-map .globe-cv { position: absolute; left: 0; top: 0; display: block; }
/* las cinco destacadas en el globo: punto y nombre, HTML encima del lienzo (globe.js los mueve con su punto). El nombre
   lleva el velo del fondo como el resto del texto suelto; pasar por encima marca su fila */
html.fx-globe .highlights.globe-on .globe-hl { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity .18s ease; }
html.fx-globe .highlights.globe-on .globe-hl.off { visibility: hidden; }
html.fx-globe .highlights.globe-on .globe-hl i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--globe-dot); box-shadow: 0 0 0 2px var(--bg); pointer-events: auto; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
html.fx-globe .highlights.globe-on .globe-hl b { position: absolute; top: 0; transform: translateY(-50%); padding: 6px 2px; white-space: nowrap; font-size: 13px; font-weight: 600; line-height: 1; color: var(--fg); text-shadow: 0 0 3px var(--bg), 0 0 10px var(--bg), 0 0 18px var(--bg); pointer-events: auto; transition: color .18s ease; }
html.fx-globe .highlights.globe-on .globe-hl[data-side="r"] b { left: 9px; }
html.fx-globe .highlights.globe-on .globe-hl[data-side="l"] b { right: 9px; }
html.fx-globe .highlights.globe-on .globe-hl.on i { transform: scale(1.6); }
html.fx-globe .highlights.globe-on .globe-hl.on b { color: var(--accent-2); }
html.fx-globe .highlights.globe-on.has-on .globe-hl:not(.on) { opacity: .5; }
/* la lista: filas hairline con el nombre; la elegida en amarillo con su punto y su descripción debajo */
html.fx-globe .highlights.globe-on .hl-row { display: block; padding: 0; pointer-events: auto; }
html.fx-globe .highlights.globe-on .hl-h { font-size: clamp(20px, 1.75vw, 24px); }
html.fx-globe .highlights.globe-on .hl-name { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 11px 0; }
html.fx-globe .highlights.globe-on .hl-name::before { content: ""; flex: none; width: 6px; height: 6px; margin-left: -16px; border-radius: 50%; background: var(--globe-dot); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .3s cubic-bezier(.16, 1, .3, 1); }
html.fx-globe .highlights.globe-on .hl-row.on .hl-name { color: var(--accent-2); }
html.fx-globe .highlights.globe-on .hl-row.on .hl-name::before { opacity: 1; transform: none; }
html.fx-globe .highlights.globe-on .hl-desc { display: none; padding: 0 0 18px; font-size: 15px; }
html.fx-globe .highlights.globe-on :is(.hl-row.on, .hl-row.measure) .hl-desc { display: block; }
html.fx-globe .highlights.globe-on .hl-row.measure .hl-desc { visibility: hidden; } /* globe.js mide la más larga para reservarle lugar */
html.fx-globe .highlights.globe-on .hl-row.on .hl-desc { animation: globe-hl-in .32s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes globe-hl-in { from { opacity: 0; transform: translateY(-4px); } }
/* el globo llega al borde derecho de la pantalla: mientras está a la vista, el marcador de profundidad (fx/depth) se aparta
   en vez de quedar encima de la costa de Brasil (globe.js pone html.globe-edge) */
html.fx-globe.globe-edge .koi-depth { opacity: 0; transition: opacity .3s ease, color .3s ease; }
html.fx-globe .koi-depth.on { transition: opacity .3s ease, color .3s ease; }
/* celular: el globo arriba de la lista, a todo el ancho hasta el borde derecho (ahí se corta), más bajo */
@media (max-width: 759.98px) {
  html.fx-globe .highlights.globe-on { --hl-col: 100%; }
  html.fx-globe .highlights.globe-on .hl-map { position: relative; inset: auto; height: min(94vw, 420px); margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-3)) var(--s-3) 0; }
  html.fx-globe .highlights.globe-on .hl-name::before { display: none; } /* sin margen para colgarlo: alcanza el amarillo */
}

/* ───── Aceleradora (compact): el globo chico al lado de la frase, con todos los puntos ───── */
html.fx-globe .track.globe-on .track-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); column-gap: var(--s-6); align-items: center; }
html.fx-globe .track.globe-on .track-more { display: inline-flex; margin-top: var(--s-5); }
html.fx-globe .track.globe-on .track-map { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; pointer-events: none; }
html.fx-globe .track.globe-on .track-map::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--disc, 94%); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--bg); }
html.fx-globe .track.globe-on .track-map .globe-cv { position: absolute; left: 0; top: 0; display: block; }
@media (max-width: 759.98px) {
  html.fx-globe .track.globe-on .track-body { grid-template-columns: minmax(0, 1fr); }
  html.fx-globe .track.globe-on .track-map { width: min(100%, 320px); justify-self: center; margin-top: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  html.fx-globe .highlights.globe-on :is(.globe-hl, .globe-hl i, .globe-hl b, .hl-name, .hl-name::before) { transition: none; }
  html.fx-globe .highlights.globe-on .hl-row.on .hl-desc { animation: none; }
}