/* ==========================================================================
   trust-story.css — escena "Confianza que evoluciona".

   Los valores de esta escena (posiciones y tamanos de los orbes, colores,
   tipografia, tiempos) vienen del prototipo que entrego el cliente y se
   respetan tal cual. Lo unico que cambia es la frase.

   Dos adaptaciones, y solo dos, porque el prototipo era una pagina suelta:
   · El "stage" no pinta fondo ni esquinas redondeadas. En el prototipo era
     un recuadro sobre gris; aqui va sobre el blanco de la landing, y ese
     degradado terminaba en #dedede, que es justo el gris que se pidio
     quitar del sitio.
   · La escena vive dentro de una seccion alta con sticky, para que la frase
     se quede plantada mientras se hace scroll.
   ========================================================================== */

.trust-story{
  position:relative;
  z-index:3;
  /* 300vh: 100vh para que la escena entre, 200vh con ella plantada. Antes
     eran 200vh, y el recorrido entero se comia con un solo gesto fuerte de
     trackpad — la animacion se resolvia en tres decimas y no se veia. */
  height:300vh;
  background:#fff;
  --brand:#FB923C;
  --brand-rgb: 251,146,60;
}

.trust-story-sticky{
  position:sticky;
  top:0;
  /* Igual que en gallery-wall: svh para que la escena pegajosa entre completa
     en movil y no se mueva al ocultarse la barra de URL. */
  height:100vh;
  height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
}

/* Misma caja que el prototipo: la composicion de los orbes esta calculada
   para esta proporcion, asi que se conserva exacta. */
.trust-stage{
  position:relative;
  display:grid;
  place-items:center;
  /* El prototipo medía 914px. Aquí la escena ocupa casi toda la pantalla:
     el ancho lo limita el viewport (94vw) y la altura (148vh mantiene la
     caja por debajo de ~86vh de alto). La proporción no cambia, así que la
     composición de los orbes es la misma, solo que en grande. */
  width:min(1700px,94vw,148vh);
  aspect-ratio:914 / 530;
  /* Punto de referencia para las medidas en cqw de dentro: 100cqw == el
     ancho del escenario. Así todo escala con la caja y no con el viewport. */
  container-type:inline-size;
}

/* --------------------------------------------------------------------------
   ORBES
   -------------------------------------------------------------------------- */
.trust-story .orb{
  position:absolute;
  left:var(--x);
  top:var(--y);
  /* --s ya no lleva unidad: es el tamaño del prototipo a 914px de ancho.
     A partir de ahí el orbe crece con el escenario (var(--s)/9.14 cqw da
     exactamente --s px cuando el escenario mide 914) y nunca baja del .82
     que antes aplicaba la media query de móvil. */
  --sz:max(calc(var(--s) * .82px), calc(var(--s) / 9.14 * 1cqw));
  width:var(--sz);
  height:var(--sz);
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(var(--brand-rgb),var(--o));
  /* Parten invisibles, igual que la etiqueta y las lineas: los trae la intro.
     Si no, al rebobinar volvian al 1 del CSS y se veia un parpadeo cada vez
     que la intro se relanzaba con la escena ya a la vista. Las dos redes de
     seguridad de abajo los devuelven a 1 si la animacion no llega a correr. */
  opacity:0;
  box-shadow:
    0 0 calc(var(--sz) * .55) rgba(var(--brand-rgb), calc(var(--o) * .34)),
    0 0 calc(var(--sz) * 1.2) rgba(var(--brand-rgb), calc(var(--o) * .12));
  z-index:2;
}
/* will-change solo mientras la escena esta en pantalla (lo conmuta el JS):
   mantener 24 capas promovidas durante toda la vida de la pagina es lo que
   antes hacia pesado el scroll. */
/* `filter` NO va en la lista: en los orbes no se anima ningun filtro (el
   unico blur de la escena esta en .line). Anunciarlo obligaba al navegador a
   preparar la tuberia de filtros para las 24 capas sin que ninguna la use. */
.trust-story.is-live .orb{will-change:transform,opacity}

/* --------------------------------------------------------------------------
   TEXTO
   -------------------------------------------------------------------------- */
.trust-story .copy{
  position:relative;
  z-index:4;
  text-align:center;
  width:min(47cqw,80%);   /* 430/914 = 47% del escenario */
}

.trust-story .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:max(20px,2.19cqw);
  padding:0 max(9px,.985cqw);
  margin-bottom:max(10px,1.094cqw);
  border:1px solid rgba(var(--brand-rgb),.55);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--brand);
  font-size:max(9px,.985cqw);
  line-height:1;
  letter-spacing:-.01em;
  opacity:0;
  transform:translateY(8px) scale(.96);
}

.trust-headline{
  margin:0;
  color:var(--brand);
  font-size:clamp(27px,3.72cqw,58px);   /* 34/914 = 3.72% del escenario */
  line-height:.98;
  font-weight:560;
  letter-spacing:-.032em;
}

.trust-story .line{
  display:block;
  opacity:0;
  transform:translateY(14px);
  filter:blur(7px);
}

.trust-story .accent{
  margin-top:max(3px,.33cqw);
  font-weight:730;
}

/* --------------------------------------------------------------------------
   ENTRADA Y SALIDA LIGADAS AL SCROLL

   La escena ya no aparece de golpe y se queda plantada: sube al entrar, se
   sostiene mientras el sticky la mantiene fija, y se levanta y se va al
   salir.

   El recorrido lo monta trust-story.js con ScrollTrigger; la razon de no
   usar `animation-timeline: view()` esta explicada alli.

   Importante: el escenario no lleva `opacity:0` de partida. Si GSAP no
   cargara, la escena se queda visible y quieta en vez de invisible.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .trust-story{height:auto}
  .trust-story-sticky{position:static;height:auto;padding:22vh 0}
  .trust-story .badge,
  .trust-story .line{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  .trust-story .orb{opacity:1}
}

/* Red de seguridad: si la animacion no llegara a ejecutarse, el texto se ve. */
html.fx-failsafe .trust-story .orb{opacity:1!important}
html.fx-failsafe .trust-story .badge,
html.fx-failsafe .trust-story .line{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
html.fx-failsafe .trust-stage{
  opacity:1!important;
  transform:none!important;
}

/* --------------------------------------------------------------------------
   RELEVO AL ECOSISTEMA (se conserva del trabajo anterior)
   -------------------------------------------------------------------------- */
.ecosystem{background:#fafbfc}

.ecosystem .logo-marquee{
  width:min(1100px,calc(100% - 64px));
  margin:0 auto 112px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.ecosystem .logo-track{
  width:max-content;
  display:flex;
  gap:0;
  color:#687383;
  font-size:clamp(20px,2.6vw,35px);
  font-weight:700;
  letter-spacing:-.025em;
  animation:trust-logo-marquee 24s linear infinite;
  will-change:transform;
}
.ecosystem .logo-set{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:clamp(48px,5vw,82px);
  padding-right:clamp(48px,5vw,82px);
}
.ecosystem .logo-track span{min-width:0;white-space:nowrap}

@keyframes trust-logo-marquee{to{transform:translate3d(-33.333333%,0,0)}}

@media(max-width:768px){
  .ecosystem .logo-marquee{width:calc(100% - 32px);margin-bottom:78px}
  .ecosystem .logo-track{font-size:clamp(17px,3.4vw,22px);animation-duration:19s}
  .ecosystem .logo-set{gap:38px;padding-right:38px}
}
@media(prefers-reduced-motion:reduce){
  .ecosystem-intro > *,
  .ecosystem .logo-track span{
    opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important;
  }
}
html.fx-failsafe .ecosystem-intro > *,
html.fx-failsafe .ecosystem .logo-track span{
  opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important;
}

/* En teléfono la escena conserva exactamente las mismas piezas, pero usa el
   alto disponible en vez de encerrar todo en una franja apaisada. Así los dos
   arcos de partículas enmarcan el titular y no quedan dos grandes zonas vacías.
   El recorrido también se acorta: sigue habiendo tiempo para la entrada, el
   reposo y la salida, sin obligar a recorrer tres pantallas. */
@media(max-width:768px){
  .trust-story{
    height:175vh;
    height:175svh;
    min-height:980px;
  }
  .trust-story-sticky{height:100vh;height:100svh}
  .trust-stage{
    width:calc(100% - 24px);
    height:min(76vh,640px);
    height:min(76svh,640px);
    min-height:470px;
    aspect-ratio:auto;
  }
  .trust-story .copy{
    width:82%;
    width:min(82cqw,330px);
  }
  .trust-headline{
    font-size:clamp(31px,8.8cqw,38px);
    line-height:1.02;
  }
  .trust-story .badge{
    height:24px;
    padding-inline:11px;
    margin-bottom:12px;
    font-size:10px;
  }
}

@media(max-width:360px){
  .trust-story{min-height:900px}
  .trust-stage{width:calc(100% - 20px);min-height:420px}
  .trust-headline{font-size:clamp(29px,9cqw,34px)}
}

/* Este archivo se carga después de styles.css; el ritmo del relevo debe vivir
   aquí para que no lo vuelvan a ampliar las reglas base del marquee. */
@media(max-width:620px){
  .ecosystem .logo-marquee{
    width:calc(100% - 28px);
    margin-bottom:32px;
  }
  .ecosystem .logo-track{font-size:17px}
  .ecosystem .logo-set{gap:30px;padding-right:30px}
}