/* ==========================================================================
   TRINITY — HUB DE INDUSTRIAS

   Sólo lo propio de esta página. El resto vive en
   shared/funnel-industria.css, que es el mismo sistema que usan las ocho
   páginas que este hub enlaza: el hub tiene que verse como su destino.
   ========================================================================== */

/* --- Hero: sin fotografía, la grilla de abajo ya es todo imagen ---------- */
.hub-hero__grid{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(32px,5vw,72px);align-items:end;
}
.hub-hero h1{font-size:var(--t-h1);max-width:16ch}
.hub-hero__copy{max-width:56ch}
.hub-hero__copy strong{
  display:block;margin-bottom:var(--s-4);
  font:700 var(--t-lead)/1.4 var(--f-display);color:var(--c-navy);
}
.hub-hero__copy p{color:var(--c-gray)}

@media(max-width:900px){
  .hub-hero__grid{grid-template-columns:1fr;align-items:start}
}

/* ==========================================================================
   GRILLA DE INDUSTRIAS

   Ocho tarjetas con fotografía. El degradado no es decoración: la foto es
   variada y sin él el texto blanco pierde contraste sobre los cielos claros.
   ========================================================================== */

.ind__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s-4);margin:0;padding:0;list-style:none;
}

.ind__card{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:300px;padding:var(--s-6);
  color:#fff;text-decoration:none;overflow:hidden;
  background:var(--c-navy);
  clip-path:var(--chamfer-lg);
  transition:transform var(--dur-base) var(--ease);
}
.ind__card img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-base) var(--ease);
}
/* El degradado sostiene el texto; se oscurece al pasar el mouse. */
.ind__card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,24,38,.18) 0%,rgba(20,24,38,.62) 52%,rgba(20,24,38,.94) 100%);
  transition:opacity var(--dur-base) var(--ease);
}
.ind__card > *{position:relative;z-index:2}

.ind__card:hover{transform:translateY(-5px)}
.ind__card:hover img{transform:scale(1.05)}

.ind__card b{
  font:800 var(--t-h4)/1.14 var(--f-display);
  letter-spacing:-.02em;color:#fff;
}
.ind__card span{
  margin-top:var(--s-3);
  font-size:var(--t-sm);line-height:1.45;color:#D2D6E0;
}
/* Barra roja que crece: el mismo gesto que el resto del sitio. */
.ind__card i{
  display:block;width:38px;height:3px;margin-top:var(--s-5);
  background:var(--c-red-bright);font-style:normal;
  transition:width var(--dur-base) var(--ease);
}
.ind__card:hover i{width:78px}

@media(max-width:1100px){.ind__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .ind__grid{grid-template-columns:1fr}
  .ind__card{min-height:230px}
}

/* ==========================================================================
   CIERRE — la industria que no está en la lista
   ========================================================================== */

.hub-close__grid{
  display:grid;grid-template-columns:1.3fr .7fr;
  gap:clamp(32px,5vw,72px);align-items:center;
}
.hub-close h2{color:#fff;max-width:20ch}
.hub-close p{margin-top:var(--s-5);color:var(--c-on-dark-2);max-width:56ch}
.hub-close__accion{display:flex;justify-content:flex-end}

@media(max-width:900px){
  .hub-close__grid{grid-template-columns:1fr}
  .hub-close__accion{justify-content:flex-start}
}