/* ==========================================================================
   TRINITY — APLICACIONES MÓVILES · Solution Funnel Master v1.0

   Solo lo propio de esta solución. El resto vive en
   shared/funnel-industria.css.
   ========================================================================== */

/* --- Hero fotográfico en contexto --------------------------------------- */
.hero__figure--apps img{object-position:center center}

/* ==========================================================================
   03 · ¿CUÁNDO UNA APP?

   Es el bloque que dice cuándo NO hace falta una app. Por eso la negativa
   no va como letra chica: va destacada, a la misma altura del criterio.
   ========================================================================== */

.criterio__head{max-width:62ch}
.criterio__chips{
  display:flex;flex-wrap:wrap;gap:var(--s-3);
  margin:clamp(40px,5vw,64px) 0 0;padding:0;list-style:none;
}
.criterio__chips li{
  padding:12px 20px;
  border:1px solid var(--c-line-dark-2);background:rgba(255,255,255,.03);
  font:700 var(--t-meta)/1.2 var(--f-text);
  letter-spacing:.06em;text-transform:uppercase;color:#fff;
  transition:border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease);
}
.criterio__chips li:hover{border-color:var(--c-red-bright);background:var(--c-navy-2)}

.criterio__cierre{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,56px);align-items:start;
  margin-top:clamp(40px,5vw,64px);
}
.criterio__no{
  padding-left:var(--s-6);
  border-left:3px solid var(--c-red-bright);
  font:600 var(--t-lead)/1.5 var(--f-text);color:#fff;
}
@media(max-width:900px){
  .criterio__cierre{grid-template-columns:1fr}
  .criterio__chips li{padding:10px 16px}
}

/* ==========================================================================
   05 · ECOSISTEMA CONECTADO

   Cadena vertical: usuario → app → backend → ERP. Vertical y no horizontal
   porque son capas, no etapas de un proceso en el tiempo.
   ========================================================================== */

.eco__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.eco__grid p+p{margin-top:var(--s-4)}
.eco__cierre{
  margin-top:var(--s-6);padding-top:var(--s-5);
  border-top:2px solid var(--c-navy);
  font-weight:600;color:var(--c-navy);max-width:var(--w-text);
}

.cadena{
  display:grid;gap:0;margin:0;padding:0;list-style:none;
}
.cadena li{
  position:relative;display:flex;align-items:center;gap:var(--s-5);
  padding:var(--s-5) var(--s-6);
  background:var(--c-white);border:1px solid var(--c-line);
}
.cadena li+li{margin-top:var(--s-8)}
/* Bajada entre capas, con la punta hacia el siguiente nivel. */
.cadena li+li::before{
  content:"";position:absolute;left:50%;top:calc(var(--s-8) * -1);
  width:2px;height:var(--s-8);margin-left:-1px;
  background:var(--c-line-strong);
}
.cadena li+li::after{
  content:"";position:absolute;left:50%;top:-10px;
  width:9px;height:9px;margin-left:-5px;
  border-right:2px solid var(--c-red);border-bottom:2px solid var(--c-red);
  transform:rotate(45deg);
}
.cadena b{font:700 var(--t-h4)/1.25 var(--f-display);color:var(--c-navy)}
/* La última capa es el sistema que ya sostiene la operación. */
.cadena li:last-child{border-top:3px solid var(--c-navy)}

.f-js .cadena li+li::before{transform:scaleY(0);transform-origin:top}
.f-js [data-reveal].is-visible .cadena li+li::before{
  transform:none;transition:transform .4s var(--ease);
}
.f-js [data-reveal].is-visible .cadena li:nth-child(3)::before{transition-delay:.12s}
.f-js [data-reveal].is-visible .cadena li:nth-child(4)::before{transition-delay:.24s}

@media(max-width:900px){
  .eco__grid{grid-template-columns:1fr}
}

/* ==========================================================================
   08 · POR QUÉ TRINITY sin fotografía
   ========================================================================== */

.porque--sinfoto .porque__head{max-width:var(--w-text)}
.porque--sinfoto .porque__intro{margin-top:var(--s-6)}
.porque--sinfoto .porque__intro p+p{margin-top:var(--s-4)}

.porque__pilares--fila{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,44px);margin-top:clamp(40px,5vw,64px);
}
.porque__pilares--fila li{
  padding:var(--s-6) 0 0;border-top:2px solid var(--c-navy);border-bottom:0;
}
.porque__pilares--fila li:last-child{border-bottom:0}

@media(max-width:900px){
  .porque__pilares--fila{grid-template-columns:1fr;gap:0}
  .porque__pilares--fila li{padding-block:var(--s-5);border-top:1px solid var(--c-line)}
  .porque__pilares--fila li:first-child{border-top:2px solid var(--c-navy)}
}

@media(prefers-reduced-motion:reduce){
  .f-js .cadena li+li::before{transform:none!important}
}