/* Industry hubs (industries/index.html, es/industrias/index.html): every sector card opens on a real
   360 we captured. The cube faces come from images/industries360 and are driven by js/home-v3.js
   (the same engine as the homepage cards); this file only lays the cards out. Built by
   _apply_industry_hubs.py. */
.ihub { --ih-ease: cubic-bezier(.16, 1, .3, 1); --ih-green: #00ff88; }
.ihub-intro { max-width: 720px; margin: 0 auto 36px; color: #b6c9c2; line-height: 1.7; }
.ihub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.ihub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  color: inherit;
  text-decoration: none;
  transition: border-color .25s, transform .5s var(--ih-ease), box-shadow .5s var(--ih-ease);
}
.ihub-card:hover { border-color: rgba(0, 255, 136, .45); transform: translateY(-4px); box-shadow: 0 26px 60px -28px rgba(0, 255, 136, .35); }
.ihub-card:focus-visible { outline: 3px solid #01e4e4; outline-offset: 4px; }

.ihub-media {
  position: relative;
  isolation: isolate;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #0b1714;
}
.ihub-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ihub-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(4, 14, 12, .72));
}
.ihub-media > span {
  position: absolute;
  z-index: 3;
  left: 14px;
  bottom: 12px;
  right: 14px;
  color: #d9efe5;
  font: 500 12px/1.3 'Outfit', Arial, sans-serif;
  letter-spacing: .02em;
}

/* live 360 cube (mirrors the homepage .hi-card rules) */
.ihub-media .hi-360 { position: absolute; inset: 0; z-index: 1; overflow: hidden; perspective: var(--p, 300px); opacity: 0; transition: opacity .8s var(--ih-ease); pointer-events: none; }
.ihub-media.is-live .hi-360 { opacity: 1; }
.ihub-media .hi-cube { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.ihub-media .hi-cube i { position: absolute; width: var(--s, 600px); height: var(--s, 600px); left: calc(var(--s, 600px) / -2); top: calc(var(--s, 600px) / -2); background: #0b1714 center / 100% 100% no-repeat; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ihub-media .hi-cube .f { transform: translateZ(calc(var(--h, 300px) * -1)); }
.ihub-media .hi-cube .r { transform: rotateY(-90deg) translateZ(calc(var(--h, 300px) * -1)); }
.ihub-media .hi-cube .b { transform: rotateY(180deg) translateZ(calc(var(--h, 300px) * -1)); }
.ihub-media .hi-cube .l { transform: rotateY(90deg) translateZ(calc(var(--h, 300px) * -1)); }
.ihub-media .hi-cube .u { transform: rotateX(-90deg) translateZ(calc(var(--h, 300px) * -1)); }
.ihub-media .hi-cube .d { transform: rotateX(90deg) translateZ(calc(var(--h, 300px) * -1)); }
.ihub-media .hi-badge {
  position: absolute; z-index: 3; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 999px;
  font: 700 10.5px/1 'Outfit', Arial, sans-serif; letter-spacing: .08em; color: #fff;
  background: rgba(4, 18, 15, .55); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .5s var(--ih-ease), transform .5s var(--ih-ease);
}
.ihub-media.is-live .hi-badge { opacity: 1; transform: none; }
.ihub-media .hi-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ih-green); }

.ihub-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; text-align: left; }
.ihub .ihub-body h3 { margin: 0 !important; color: #fff; font-size: clamp(18px, 1.6vw, 20px) !important; line-height: 1.25 !important; letter-spacing: -.01em !important; font-weight: 600; }
.ihub-body p { margin: 0; color: #b6c9c2; font-size: 14.5px; line-height: 1.6; }
.ihub-more { margin-top: auto; padding-top: 8px; color: #7fe9bd; font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.ihub-more::after { content: '→'; transition: transform .3s var(--ih-ease); }
.ihub-card:hover .ihub-more::after { transform: translateX(4px); }
.ihub-lang { color: #8fa9a0; font-weight: 400; font-size: 12px; }

.ihub-subhead { margin: clamp(40px, 5vw, 60px) 0 18px; text-align: center; }
.ihub-subhead h3 { margin: 0 0 6px; color: #fff; font-size: clamp(20px, 2.4vw, 26px); }
.ihub-subhead p { margin: 0; color: #9fb8ae; font-size: 14.5px; }
.ihub-tilt { display: none; margin: 18px auto 0; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #e8fff4; font: 600 13px/1 'Outfit', Arial, sans-serif; cursor: pointer; }
.ihub-tilt.is-shown { display: flex; align-items: center; gap: 8px; }

@media (max-width: 991px) { .ihub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .ihub-grid { grid-template-columns: 1fr; gap: 14px; }
  .ihub-media { aspect-ratio: 16 / 10; }
  .ihub-body { padding: 16px 16px 18px; }
  .ihub-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ihub-card, .ihub-card:hover { transition: none; transform: none; } }