/* ==========================================================================
   TRINITY — GASTRONOMÍA · Commercial Funnel Master v1.1

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

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


/* --- Nodo del organigrama con dos líneas de detalle --------------------- */
.org__node span+span{margin-top:-2px}

/* ==========================================================================
   08 · EVIDENCIA — el hito

   Una cifra sola dice poco; el antes es el que le da sentido. Por eso el
   bloque contrasta el punto de partida con el resultado, sin logo ni foto:
   las transformaciones específicas siguen siendo anónimas hasta autorización.
   ========================================================================== */

.hito__grid{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px,5vw,72px);align-items:center;
  margin-top:clamp(40px,5vw,64px);
}
/* El aire entre párrafos va acá y no en un style inline por nodo. */
.hito__grid p+p{margin-top:var(--s-4)}
.hito{
  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);
}
.hito>div{display:grid;justify-items:center;gap:var(--s-3);text-align:center}
.hito__rotulo{
  font:700 var(--t-meta)/1 var(--f-text);
  letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--c-gray);
}
.hito__antes b{font:700 var(--t-h4)/1.25 var(--f-display);color:var(--c-navy)}
.hito__despues b{font:800 clamp(30px,3.4vw,44px)/1 var(--f-display);color:var(--c-red-on-light)}
.hito__pie{font-size:var(--t-meta);color:var(--c-gray);max-width:22ch}

.hito__flecha{
  position:relative;display:block;width:44px;height:2px;background:var(--c-line-strong);
}
.hito__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);
}
.f-js .hito__flecha{transform:scaleX(0);transform-origin:left}
.f-js .hito.is-visible .hito__flecha{transform:none;transition:transform .6s var(--ease) .2s}

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

/* ==========================================================================
   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 .hito__flecha{transform:none!important}
}