/* ==========================================================================
   TRINITY — FACTURACIÓN ELECTRÓNICA SIFEN · Solution Funnel Master v1.0

   Solo lo propio de esta solución. 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);
}

/* El flujo SIFEN tiene seis nodos, no cinco. Van en dos filas de tres y no
   en una fila de seis: .wrap corta en 1280px, así que seis columnas dan
   ~172px por nodo en cualquier pantalla y etiquetas como "Documento
   electrónico" quedan apretadas. Dos filas de tres dan ~354px. */
.flujo__chain--seis{grid-template-columns:repeat(3,1fr)}
/* La flecha del cuarto nodo abre fila: apuntaría al vacío de la izquierda. */
.flujo__chain--seis li:nth-child(4)::before{display:none}

@media(max-width:860px){
  .flujo__chain--seis{grid-template-columns:1fr}
  .flujo__chain--seis li:nth-child(4)::before{display:block}
}

/* --- Hero con asset pendiente ------------------------------------------- */
.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)}
}

/* ==========================================================================
   03 · CONTEXTO SIFEN

   Bloque explicativo, no comercial: dos columnas de lectura tranquila.
   ========================================================================== */

.contexto__grid{
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px,5vw,72px);align-items:start;
}
.contexto__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);
}
@media(max-width:900px){.contexto__grid{grid-template-columns:1fr}}

/* ==========================================================================
   05 · DOS ESCENARIOS

   Dos rutas equivalentes, no una recomendada y una secundaria. El límite de
   integración va debajo, a la misma jerarquía: es una condición del alcance,
   no la letra chica.
   ========================================================================== */

.rutas__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,3vw,44px);margin-top:clamp(40px,5vw,64px);
}
.rutas__grid article{
  padding:var(--s-8) var(--s-6);
  background:var(--c-white);border:1px solid var(--c-line);
  border-top:3px solid var(--c-navy);
  transition:border-top-color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
.rutas__grid article:hover{border-top-color:var(--c-red);transform:translateY(-4px)}
.rutas__grid .ico{margin-bottom:var(--s-5)}
.rutas__grid h3{font-size:var(--t-h4);margin-bottom:var(--s-3)}
.rutas__grid p{font-size:var(--t-sm);color:var(--c-gray)}

.rutas__limite{
  max-width:72ch;margin-top:clamp(32px,4vw,48px);
  padding:var(--s-5) var(--s-6);
  background:var(--c-white);border-left:3px solid var(--c-red);
  font-size:var(--t-sm);color:var(--c-ink);
}

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

/* ==========================================================================
   08 · EVIDENCIA — la línea dentro del ecosistema
   ========================================================================== */

.eco__grid{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(32px,5vw,72px);align-items:center;
  margin-top:clamp(40px,5vw,64px);
}
.eco{
  margin:0;padding:var(--s-8) var(--s-6);
  background:var(--c-white);border-top:3px solid var(--c-navy);
}
.eco__lista{
  display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none;
}
.eco__lista li{
  padding:var(--s-4) var(--s-5);
  background:var(--c-cloud);border:1px solid var(--c-line);
  font:600 var(--t-sm)/1.3 var(--f-text);color:var(--c-navy);
}
.eco__lista a{text-decoration:none;display:block}
.eco__lista li:hover{border-color:var(--c-red)}
.eco__pie{
  margin-top:var(--s-5);padding:var(--s-4) var(--s-6);text-align:center;
  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){.eco__grid{grid-template-columns:1fr}}

/* ==========================================================================
   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)}
}