/* ==========================================================================
   TRINITY — TALLERES AUTOMOTRICES · Commercial Funnel Master v1.2

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

/* --- Cierre del diagrama del flujo del vehículo -------------------------- */
.flujo__cierre{
  max-width:64ch;margin-top:var(--s-8);
  font-size:var(--t-sm);color:var(--c-on-dark-2);
}


/* --- Hero con asset pendiente: el placeholder ocupa la columna entera ---- */
.hero__figure--pendiente{display:grid}
.hero__figure--pendiente .pendiente{
  position:relative;z-index:1;height:100%;
  min-height:clamp(380px,44vw,560px);aspect-ratio:auto;
}
@media(max-width:980px){
  .hero__figure--pendiente .pendiente{min-height:clamp(260px,54vw,400px)}
}

/* ==========================================================================
   06 · TRAZABILIDAD

   El master las plantea como PREGUNTAS, no como estados. Se respeta: lo que
   diferencia a este funnel es la lógica comercial, no el modelo de datos.
   ========================================================================== */

.traza__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.traza__grid p+p{margin-top:var(--s-4)}
.traza__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);
}

.estados{
  position:relative;margin:0;padding:0 0 0 var(--s-8);list-style:none;
  display:grid;gap:var(--s-6);
}
.estados::before{
  content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;
  background:var(--c-line-strong);
}
.f-js .estados::before{transform:scaleY(0);transform-origin:top}
.f-js [data-reveal].is-visible .estados::before{
  transform:none;transition:transform .8s var(--ease) .1s;
}
.estados li{position:relative;display:flex;align-items:center;gap:var(--s-4)}
.estados b{font:700 var(--t-h4)/1.25 var(--f-display);color:var(--c-navy)}
.estados__punto{
  position:absolute;left:calc(var(--s-8) * -1);top:50%;
  width:12px;height:12px;margin-top:-6px;
  background:var(--c-white);border:2px solid var(--c-line-strong);border-radius:50%;
}
/* La última pregunta es la que cierra el circuito económico. */
.estados li:last-child .estados__punto{background:var(--c-red);border-color:var(--c-red)}
.estados li:last-child b{color:var(--c-red-on-light)}

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

/* ==========================================================================
   08 · EVIDENCIA — capas de una misma operación

   Cuatro capas que en la mayoría de los talleres viven separadas, acá
   convergen. Sin logo ni cifras: el master permite describir la
   transformación, pero los volúmenes requieren autorización.
   ========================================================================== */

.capas__grid{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px,5vw,72px);align-items:center;
  margin-top:clamp(40px,5vw,64px);
}
.capas{
  display:grid;justify-items:center;gap:0;margin:0;
  padding:var(--s-8) var(--s-6);
  background:var(--c-cloud);border-top:3px solid var(--c-navy);
}
.capas__lista{
  display:grid;gap:var(--s-3);width:100%;margin:0;padding:0;list-style:none;
}
.capas__lista li{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);
  background:var(--c-white);border:1px solid var(--c-line);
}
.capas__lista b{font:600 var(--t-body)/1.3 var(--f-text);color:var(--c-navy)}
/* Las capas se van estrechando: convergen en una sola lectura. */
.capas__lista li:nth-child(1){width:100%}
.capas__lista li:nth-child(2){width:94%}
.capas__lista li:nth-child(3){width:88%}
.capas__lista li:nth-child(4){width:82%}

.capas__pie{
  margin-top:var(--s-5);padding:var(--s-3) var(--s-6);
  background:var(--c-navy);color:#fff;
  font:700 var(--t-meta)/1.2 var(--f-display);
  letter-spacing:.12em;text-transform:uppercase;
}

@media(max-width:900px){
  .capas__grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .capas{padding:var(--s-6) var(--s-4)}
  .capas__lista li{width:100%!important}
}

/* ==========================================================================
   09 · 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 .estados::before{transform:none!important}
}

/* ==========================================================================
   05 · PRODUCTO REAL — leyenda sin marcadores numerados

   La captura de esta vertical es una tabla densa, no un dashboard de
   tarjetas: un marcador de 30px cubre casi dos filas y tapa el dato que
   pretende señalar. Se probaron tres ubicaciones y todas comían contenido.
   Acá la leyenda describe la pantalla en vez de apuntar a coordenadas.
   ========================================================================== */
.real__legend--simple li{grid-template-columns:auto 1fr;align-items:baseline}
.real__legend--simple i{
  width:7px;height:7px;
  background:var(--c-red);transform:rotate(45deg);
}