/*
  KÖNNEN Supply Chain Solutions — sitio web
  Concepto, diseño y desarrollo: Rodolfo Zavala · 2026
  Créditos completos: /humans.txt
*/
/* ===== INDUSTRIAS — page-specific styles ==================================
   Shares :root tokens, reset, header/nav, mobile menu and footer from
   styles.css (loaded first). Everything below is unique to this page:
   the hero, the jump-nav, the alternating industry sections and the
   closing CTA. Distinct from index.html's grid-card treatment on purpose —
   this reads as an editorial index rather than a tile wall. */

/* ---- HERO ---- */
.ind-hero{
  position:relative; background:var(--black); color:#fff;
  padding:170px 0 80px; overflow:hidden;
}
.ind-hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:
    var(--grain),
    radial-gradient(ellipse 900px 600px at 85% 10%, rgba(232,119,34,.16), transparent 60%),
    linear-gradient(150deg, #141416 0%, #08080a 60%, #101012 100%);
}
.ind-hero .wrap{position:relative; z-index:1;}
.ind-hero-copy{max-width:760px;}
.ind-hero-copy .eyebrow{color:var(--orange);}
.ind-hero-copy h1{
  color:#fff; font-size:clamp(40px,6vw,74px); margin-top:10px;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.ind-hero-copy h1 .accent{color:var(--orange);}
.ind-hero-copy p{color:var(--silver-2); font-size:17px; line-height:1.7; max-width:600px; margin-top:26px;}

/* ---- JUMP NAV — horizontal pill row, scrollable on narrow screens ---- */
.ind-jump{background:var(--paper); border-bottom:1px solid var(--line); padding:20px 0;}
.ind-jump-row{
  display:flex; gap:10px; overflow-x:auto; scrollbar-width:none;
}
.ind-jump-row::-webkit-scrollbar{display:none;}
.ind-jump-row a{
  display:flex; align-items:center; gap:9px; flex-shrink:0;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--silver-3); background:var(--white);
  padding:10px 18px; border:1px solid var(--line); border-radius:999px;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.ind-jump-row a span{font-family:var(--ff-mono); color:var(--orange); font-size:11px;}
.ind-jump-row a:hover{color:var(--ink); border-color:var(--ink);}

/* ---- INDUSTRY DETAIL SECTIONS — alternating image/copy, alternating bg ---- */
.ind-detail{background:var(--white); padding:110px 0;}
.ind-detail--alt{background:var(--paper);}
.ind-detail-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center;}
.ind-detail--alt .ind-detail-grid{direction:rtl;}
.ind-detail--alt .ind-detail-grid > *{direction:ltr;}

.ind-detail-media{
  position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/5; background:var(--black);
}
.ind-detail-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.ind-detail-media:hover img{transform:scale(1.06);}
.ind-detail-num{
  position:absolute; left:20px; top:20px; z-index:1;
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.06em; color:#fff;
  background:rgba(11,11,12,.55); padding:6px 13px; border-radius:999px;
}
@media (prefers-reduced-motion: reduce){
  .ind-detail-media img{transition:none;}
  .ind-detail-media:hover img{transform:none;}
}

/* ---- INDUSTRY DETAIL MEDIA SWITCH — a two-slide strip (photo + reel)
   inside the same .ind-detail-media frame; left/right arrows slide between
   them. Slides sit in a flex track so "switch" is just a translateX. ---- */
.ind-media-track{
  display:flex; width:100%; height:100%;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.ind-media-slide{position:relative; flex:0 0 100%; width:100%; height:100%;}

.ind-media-nav{
  position:absolute; top:50%; z-index:3; transform:translateY(-50%);
  width:38px; height:38px; padding:0; border:0; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,11,12,.55); color:#fff;
  transition:background .25s ease, transform .25s ease;
}
.ind-media-nav svg{width:18px; height:18px;}
.ind-media-nav:hover{background:var(--orange); transform:translateY(-50%) scale(1.08);}
.ind-media-nav--prev{left:14px;}
.ind-media-nav--next{right:14px;}

/* ---- INDUSTRY DETAIL VIDEO — click-to-play reel facade living inside one
   slide (poster fills it, iframe only loads on click so pages with several
   reels don't pay for autoplaying embeds on load) ---- */
.ind-video:not(.is-playing)::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:rgba(0,0,0,.28);
}
.ind-video-play{
  position:absolute; inset:0; margin:auto; z-index:2;
  width:64px; height:64px; padding:0; border:0; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange); color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.4);
  transition:transform .25s ease, background .25s ease;
}
.ind-video-play svg{width:22px; height:22px;}
.ind-video-play:hover{transform:scale(1.08); background:var(--ink);}
.ind-video.is-playing .ind-video-play{display:none;}
.ind-video-frame{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1;}

.ind-detail-copy h2{margin-top:8px; max-width:520px;}
.ind-detail-dek{
  font-family:var(--ff-body); font-style:italic; font-weight:600; font-size:18px;
  color:var(--ink); line-height:1.4; margin:18px 0 22px;
}
.ind-detail-copy p{font-size:15px; line-height:1.75; color:var(--silver-3); max-width:560px; margin-bottom:16px;}
.ind-detail-copy p:last-of-type{margin-bottom:0;}

/* ---- CLOSING CTA ---- */
.ind-cta{background:var(--black); color:#fff; padding:120px 0; text-align:center;}
.ind-cta .eyebrow{justify-content:center; color:var(--orange);}
.ind-cta h2{color:#fff; margin-top:10px;}
.ind-cta h2 .accent{color:var(--orange);}
.ind-cta p{color:var(--silver-2); max-width:520px; margin:22px auto 34px;}
.ind-cta .btn{margin:0 auto;}

/* ---- RESPONSIVE ---- */
@media (max-width:980px){
  .ind-detail-grid{grid-template-columns:1fr; gap:36px;}
  .ind-detail-media{aspect-ratio:16/9;}
  .ind-detail-copy h2, .ind-detail-copy p{max-width:none;}
}
@media (max-width:600px){
  .ind-hero{padding:140px 0 60px;}
  .ind-detail{padding:80px 0;}
  .ind-cta{padding:90px 0;}
  .ind-media-nav{width:34px; height:34px;}
  .ind-media-nav svg{width:16px; height:16px;}
}