/* Interacciones agregadas sobre el build original (index.9EFLJZnl.css) */

/* ---------- Cursor custom global ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--blanco-tech);
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}

.cursor.is-visible {
  opacity: 1;
}

.cursor.is-hidden {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  html.has-cursor,
  html.has-cursor * {
    cursor: none !important;
  }
}

/* ---------- Criterios: el botón naranja actúa como cursor ---------- */
.info__cell--words.is-cursor-mode {
  z-index: 2;
}

.info__cell--words.is-cursor-mode .info__criteria-btn {
  pointer-events: none;
}

/* ---------- Criterios: blanco sólo en hover ---------- */
/* Mayor especificidad que las reglas con data-astro-cid del build */
.info__words .info__word {
  justify-self: start;
  transition: color 0.35s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .info__words .info__word:hover {
    color: var(--blanco-tech);
  }
}

/* ---------- Nav: el ítem siguiente usa el mismo color que el resto ---------- */
.nav-pill .nav-pill__link.is-next {
  opacity: 0.2;
}

/* ---------- Embajadores: las iniciales siempre con dots redondos ---------- */
/* El build original pasa ROND a 0 en hover (dots cuadrados) con una regla más
   específica, por eso !important. El círculo de fondo mantiene su animación
   (crece hasta llenar el cuadrado); a las iniciales sólo se les agranda
   levemente cada dot, en su lugar, con un trazo del mismo color. */
.embajadores .embajador__initials {
  font-variation-settings: 'ROND' 100 !important;
  -webkit-text-stroke: 0 currentColor;
  transition: -webkit-text-stroke-width 0.5s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .embajadores .embajador:hover .embajador__initials {
    -webkit-text-stroke-width: 0.022em;
  }
}

/* ---------- Jurados: slider de dots arrastrable ---------- */
.jurados__foot .jurados__dots {
  position: relative;
  touch-action: none;
  user-select: none;
}

/* Los dots quedan fijos; la posición actual la marca el thumb */
.jurados__foot .jurados__dot.is-current {
  margin-inline: 0;
  transform: none;
}

/* Thumb: apenas más grande que los dots (16px) y crece un poco al usarlo.
   El anillo del color de fondo recorta los dots vecinos al arrastrar, así
   el thumb siempre se lee como un círculo limpio. */
.jurados__thumb {
  --size: calc(20 * var(--px));
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%;
  background: var(--blanco-tech);
  box-shadow: 0 0 0 calc(4 * var(--px)) var(--nocturno);
  transition: scale 0.25s var(--ease-out);
}

.jurados__dots.is-active .jurados__thumb {
  scale: 1.15;
}

@media (width <= 1023px) {
  .jurados__thumb {
    --size: 13px;
    box-shadow: 0 0 0 3px var(--nocturno);
  }
}

/* ---------- Sponsors: los logos crecen en hover, igual que en Aliados ---------- */
.sponsors .sponsor__logo {
  transition: transform 0.4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .sponsors .sponsor:hover .sponsor__logo {
    transform: scale(1.08);
  }
}

/* Link a LinkedIn de jurados/embajadores (Sanity): la flecha es el link */
.arrow-link { display: contents; }
.arrow-link img { pointer-events: auto; -webkit-user-drag: none; }

/* Manifesto: ocupa exactamente la pantalla en desktop (el diseño lo fijaba a 1080px de alto escalados).
   El círculo (y la frase, proporcional a él) también se limita por el alto, y el título se ancla
   por encima del círculo con un gap fijo: así el círculo nunca lo pisa, ni al crecer (0.92 → 1). */
.manifesto .manifesto__lead { top: auto; bottom: calc(100% - var(--cy) + var(--circle) / 2 + var(--lead-gap)); }
@media (width >= 1024px) {
  .manifesto.manifesto {
    --cy: 51.67svh;
    --circle: min(calc(416 * var(--px)), 38.5svh);
    --fs: calc(var(--circle) * 0.323);
    --lead-gap: 8svh;
  }
  .manifesto .manifesto__stage { height: 100svh; min-height: 0; max-height: none; }
  .manifesto .manifesto__frame { height: 100svh; }
}
@media (width <= 1023px) {
  .manifesto.manifesto {
    --circle: min(64vw, 50svh);
    --fs: calc(var(--circle) * 0.2656);
    --lead-gap: 5svh;
  }
}


/* Carrusel de jurados: mano de grab (en vez del cursor custom); pointer sólo sobre la flecha */
html.has-cursor .jurados__viewport, html.has-cursor .jurados__viewport * { cursor: grab !important; }
html.has-cursor .jurados__viewport.is-dragging, html.has-cursor .jurados__viewport.is-dragging * { cursor: grabbing !important; }
html.has-cursor .jurados__viewport:not(.is-dragging) .arrow-link img { cursor: pointer !important; }
html:has(.jurados__viewport:hover) .cursor { opacity: 0 !important; }

/* Lenis (node_modules/lenis/dist/lenis.css) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* Máscaras de SplitText: con line-height < 1 cortaban los descendentes (g, p, y).
   Se agranda la máscara hacia abajo sin mover el layout (y el from de la animación va a 140%). */
[data-split] > div,
[data-hero-title] > div { padding-bottom: 0.25em; margin-bottom: -0.25em; }

/* Hero: 100% del alto en desktop (el diseño lo fijaba a 1149px escalados).
   Posiciones verticales en proporción: 505, 624 y 915 sobre 1149. */
@media (width >= 1024px) {
  /* Nunca más bajo que el diseño escalado al ancho: en pantallas anchas y bajas (ej. 1366×600) el contenido no entraba */
  .hero .hero__frame { height: max(100svh, calc(1149 * var(--px))); }
  .hero .hero__chip { top: 43.95%; }
  .hero .hero__title { top: 54.31%; }
  .hero .hero__org { top: 79.63%; }
}

/* Info (hard mode + párrafo): la primera fila ocupa la pantalla en desktop (el diseño la fijaba a 999px escalados).
   Nunca menos que el círculo (964px escalados) para que no se salga de su celda en pantallas anchas y bajas. */
@media (width >= 1024px) {
  /* round(): con altos fraccionarios se veía una costura de 1px con el fondo verde de la sección. */
  .info .info__grid { grid-template-rows: round(max(100svh, calc(964 * var(--px))), 1px) round(110svh, 1px); }
  /* Criterios + tecnología: el bordó llega hasta el borde derecho aunque el frame tope en 1920px
     (border-image con outset pinta fuera de la caja sin generar scroll horizontal). */
  .info .info__cell--tech { border-image: conic-gradient(var(--nocturno) 0 0) fill 0 / / 0 100vw 1px 0; }
  /* Contenido de la fila centrado verticalmente. Palabras: 5 líneas × 130 × 0.9 + 4 gaps × 10 = 625px escalados;
     el botón conserva su offset de 49px respecto de las palabras. */
  .info .info__words { top: calc(50% - 312.5 * var(--px)); }
  .info .info__criteria-btn { top: calc(50% - 263.5 * var(--px)); }
  .info .info__cell--tech { display: flex; flex-direction: column; justify-content: center; padding-top: 0; }
  /* Círculo centrado en la fila; titular y párrafo conservan su offset respecto del círculo (254 y 284). */
  .info .info__circle { top: calc(50% - 482 * var(--px)); }
  .info .info__claim { top: calc(50% - 228 * var(--px)); }
  .info .info__intro { top: calc(50% - 198 * var(--px)); }
}

/* Estado inicial de las animaciones de entrada, oculto por CSS antes de que arranque GSAP
   (si no, se ven un instante y "saltan" cuando GSAP las esconde para animarlas).
   Si main.js no arranca, el failsafe del <head> saca .js y todo queda visible. */
.js [data-split],
.js [data-fade],
.js [data-stagger] > * { visibility: hidden; }

/* Link de cada aliado: ocupa todo el círculo y centra el logo (el % de ancho del logo se calcula contra el círculo) */
.aliado__link { display: grid; place-items: center; width: 100%; height: 100%; }
/* Tablet: 3 por fila con la fila incompleta centrada */
@media (width >= 600px) and (width <= 1023px) {
  .aliados .aliados__list { display: flex; flex-wrap: wrap; justify-content: center; }
  .aliados .aliados__list > .aliado,
  .aliados .aliados__list > .aliado.aliado--full { width: calc((100% - 24px) / 3); }
}

/* Embajadores en tablet/mobile: columnas iguales (1fr crecía con los nombres largos en nowrap),
   el nombre puede partirse y el bloque de color llena la tarjeta si la fila es más alta. */
/* En todos los tamaños: nombres largos en dos renglones y bloque de color hasta abajo */
.embajadores .embajador { display: flex; flex-direction: column; }
.embajadores .embajador__meta { flex: 1; align-content: start; }
.embajadores .embajador__name { white-space: normal; }
@media (width <= 1023px) {
  .embajadores .embajadores__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (width <= 767px) {
  .embajadores .embajadores__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* People (+200), Participar y Footer: 100% del alto.
   Desktop: el diseño las fijaba a 1080 / 1043 / 941px escalados; las posiciones verticales pasan a % del frame.
   Tablet/mobile: son columnas flex, alcanza con min-height (si el contenido es más alto, crece). */
@media (width >= 1024px) {
  /* Mínimo = alto del diseño escalado al ancho, para que en pantallas bajas no se corte ni se pise */
  .people .people__frame { height: max(100svh, calc(1080 * var(--px))); }
  .participar .participar__frame { height: max(100svh, calc(1043 * var(--px))); }
  .footer .footer__frame { height: max(100svh, calc(941 * var(--px))); }
  .people .people__title { top: 14.72%; }          /* 159 / 1080 */
  .people .people__body { top: 72.41%; }           /* 782 / 1080 */
  .people .people__dots { top: calc(50% - 540 * var(--px)); }
  .participar .participar__copy { top: 40.08%; }   /* 418 / 1043 */
  .participar .participar__options { top: 84.02%; }/* 876.3 / 1043 */
  .participar .participar__figure { top: calc(50% - 454 * var(--px)); }
  .footer .footer__dots { top: calc(50% - 391.5 * var(--px)); }
  .footer .footer__socials { top: 82.89%; }        /* 780 / 941 */
}
@media (width <= 1023px) {
  .people .people__frame,
  .participar .participar__frame,
  .footer .footer__frame { min-height: 100svh; }
  .participar .participar__frame,
  .footer .footer__frame { justify-content: center; }
}

/* Logo combinado Paisanos | Fardo (hero y pestaña del footer): mismo ancho que sumaban los logos sueltos */
.org-logos { display: block; height: auto; width: calc(306 * var(--px)); }
.org-logos--footer { width: calc(259 * var(--px)); }
/* Payoneer: logo nuevo cuadrado (164×164) */
.sponsors .sponsor__logo--payoneer { width: calc(164 * var(--px)); }
@media (width <= 1023px) {
  .org-logos { width: 210px; }
  .org-logos--footer { width: 181px; }
  .sponsors .sponsor__logo--payoneer { width: 48%; }
}
/* Carrusel de jurados: snap apagado mientras se arrastra, scrollea con rueda o se acomoda (lo maneja main.js) */
.jurados .jurados__viewport.is-free { scroll-snap-type: none; }

/* Sponsor Plim Plim (logo apaisado 1015×376) con link a su web */
.sponsor__link { display: grid; place-items: center; width: 100%; height: 100%; }
.sponsors .sponsor__logo--plimplim { width: calc(170 * var(--px)); }
@media (width <= 1023px) {
  .sponsors .sponsor__logo--plimplim { width: 62%; }
}