/* ==========================================================================
   TRINITY — CONSTRUCTORAS · Commercial Funnel Master v2.1

   Solo lo propio de esta industria. Todo lo demás (hero, cards, diagramas,
   plataforma, formulario, FAQ) vive en shared/funnel-industria.css.
   ========================================================================== */

/* --- Cierre del diagrama de línea base (§18.3) --------------------------- */
.flujo__cierre{
  max-width:64ch;margin-top:var(--s-8);
  font-size:var(--t-sm);color:var(--c-on-dark-2);
}

/* --- Plataforma web: acá el recurso es una captura ancha, no un teléfono,
       así que la columna de texto cede espacio. --------------------------- */
.plataforma__grid--ancho{grid-template-columns:.85fr 1.15fr}
@media(max-width:900px){.plataforma__grid--ancho{grid-template-columns:1fr}}

.equipo{margin:0;display:grid;gap:var(--s-4)}
.equipo img{width:100%}
.equipo figcaption{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  font-size:var(--t-meta);color:var(--c-on-dark-3);
}
.equipo figcaption .demo{
  padding:3px 9px;border:1px solid var(--c-line-dark);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-on-dark-2);
}

/* ==========================================================================
   EVIDENCIA — fragmentación (§18.8)

   El visual pedido es "~20 planillas → información centralizada". Se dibuja
   con tipografía y formas, no con una foto ni un logo: el caso todavía es
   anónimo y los alcances diseñados no son resultados implementados.
   ========================================================================== */

.frag__grid{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px,5vw,72px);align-items:center;
  margin-top:clamp(40px,5vw,64px);
}
.frag{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--s-5);margin:0;padding:var(--s-8) var(--s-6);
  background:var(--c-cloud);border-top:3px solid var(--c-navy);
}
.frag>div{display:grid;justify-items:center;gap:var(--s-4);text-align:center}
.frag__rotulo{
  font:700 var(--t-meta)/1 var(--f-text);
  letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--c-gray);
}
.frag b{font:700 var(--t-h4)/1.25 var(--f-display);color:var(--c-navy)}
.frag__despues b{color:var(--c-red-on-light)}
.frag .ico{width:34px;height:34px}

/* Las planillas: seis hojas apiladas y desalineadas. */
.frag__hojas{position:relative;display:block;width:64px;height:44px}
.frag__hojas i{
  position:absolute;top:0;left:0;width:30px;height:40px;
  background:#fff;border:1px solid var(--c-line-strong);
}
.frag__hojas i:nth-child(2){transform:translate(8px,3px) rotate(4deg)}
.frag__hojas i:nth-child(3){transform:translate(16px,-2px) rotate(-3deg)}
.frag__hojas i:nth-child(4){transform:translate(24px,4px) rotate(6deg)}
.frag__hojas i:nth-child(5){transform:translate(32px,1px) rotate(-2deg)}
.frag__hojas i:nth-child(6){transform:translate(40px,5px) rotate(3deg)}

.frag__flecha{
  position:relative;display:block;width:44px;height:2px;background:var(--c-line-strong);
}
.frag__flecha::after{
  content:"";position:absolute;right:0;top:50%;
  width:10px;height:10px;margin-top:-6px;
  border-top:2px solid var(--c-red);border-right:2px solid var(--c-red);
  transform:rotate(45deg);
}
/* El trazo se dibuja al entrar, una sola vez. */
.f-js .frag__flecha{transform:scaleX(0);transform-origin:left}
.f-js .frag.is-visible .frag__flecha{transform:none;transition:transform .6s var(--ease) .2s}

@media(max-width:900px){
  .frag__grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .frag{grid-template-columns:1fr;gap:var(--s-6)}
  .frag__flecha{width:2px;height:38px;justify-self:center}
  .frag__flecha::after{right:auto;top:auto;bottom:0;left:50%;margin:0 0 0 -6px;transform:rotate(135deg)}
  .f-js .frag__flecha{transform:scaleY(0);transform-origin:top}
}

@media(prefers-reduced-motion:reduce){
  .f-js .frag__flecha{transform:none!important}
}