/*
  KÖNNEN Supply Chain Solutions — sitio web
  Concepto, diseño y desarrollo: Rodolfo Zavala · 2026
  Créditos completos: /humans.txt
*/
/* ===== PRÓXIMAS INNOVACIONES — page-specific styles ========================
   Shares :root tokens, reset, header/nav, mobile menu and footer from
   styles.css (loaded first). Tone: an internal R&D dossier that leaked a
   little further than it should have — mono "PROJECT 0N" labels, status/
   progress read-outs, bracket-cornered callouts — rather than a polished
   marketing teaser. Runs dark end to end; each project card is its own
   dark, photo-led panel (real teaser renders, not synthetic gradients). */

/* ---- HERO — the real teaser photo runs full-bleed behind the whole
   section (landscape, edge-to-edge) instead of sitting boxed/cropped in a
   side panel. Gradients fade it into the surrounding black on the left
   (where the copy sits) and along the top/bottom edges, so the photo
   dissolves into the page rather than being cut off by a hard frame. */
.pi-hero{
  position:relative; overflow:hidden;
  min-height:540px; display:flex; align-items:flex-end;
  color:#fff; padding:150px 0 60px;
}
.pi-hero-media{position:absolute; inset:0; z-index:0; background:#08080a;}
/* a flatter, banner-like panel means cover crops much less off the top/
   bottom than the old taller hero did — object-position is biased up a
   touch so the ceiling lights stay in frame instead of the foreground floor */
.pi-hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%;
}
/* shadow only does work on the left, where the copy sits — the right
   two-thirds of the shot (the covered shape, the KÖNNEN wall mark) stays
   fully clear and undarkened */
.pi-hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, #08080a 0%, rgba(8,8,10,.97) 22%, rgba(8,8,10,.8) 40%, rgba(8,8,10,.4) 58%, transparent 76%),
    linear-gradient(180deg, rgba(8,8,10,.3) 0%, transparent 16%, transparent 82%, rgba(8,8,10,.5) 100%);
}
.pi-hero-wrap{position:relative; z-index:1; width:100%;}
/* one shadow on the whole left-hand block (text-shadow inherits) instead
   of tuning it per element, so headline/subtitle/paragraph/stat all lift
   off the photo consistently */
.pi-hero-copy{position:relative; max-width:600px; text-shadow:0 3px 16px rgba(0,0,0,.7);}
.pi-hero h1{color:#fff; font-size:clamp(38px,5vw,60px); line-height:.98;}
.pi-hero-sub{font-family:var(--ff-body); font-size:19px; font-weight:600; color:#fff; margin-top:20px;}
.pi-hero-copy-p{color:var(--silver-2); font-size:15.5px; line-height:1.7; max-width:420px; margin-top:14px;}
.pi-hero-stat{display:flex; align-items:center; gap:18px; margin-top:44px; padding-left:18px; border-left:1px solid rgba(255,255,255,.18);}
.pi-hero-stat b{font-family:var(--ff-display); font-size:44px; font-weight:700; color:#fff; line-height:1;}
.pi-hero-stat span{font-family:var(--ff-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--silver-1); line-height:1.6;}

/* ---- PROJECT SECTIONS — a dossier index, not a marketing carousel. Each
   project is its own full-width horizontal block (same alternating-photo
   pattern as industrias.html's industry sections): the name runs above the
   photo instead of overlaid on it, and the percentage is pulled out into
   its own stat next to the image instead of sitting inside a caption
   strip. Blocks alternate the image side and a hair of background tone to
   keep the stack from reading as one long undifferentiated scroll. ---- */
.pi-projects{background:var(--black); color:#fff;}
.pi-proj{padding:64px 0; border-bottom:1px solid rgba(255,255,255,.08);}
.pi-proj:last-child{border-bottom:none;}
.pi-proj:nth-child(even){background:#0c0c0e;}

.pi-proj-head{margin-bottom:26px;}
.pi-proj-eyebrow{margin-bottom:10px;}
.pi-proj-num{font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; color:var(--silver-2);}
.pi-proj-title{
  color:#fff; font-size:clamp(28px,4vw,48px); margin-top:0; line-height:1.2;
  letter-spacing:-.01em; padding-left:20px; border-left:3px solid var(--orange);
}
.pi-proj-cat{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--silver-2); margin-top:8px; padding-left:20px;
}
@media (max-width:420px){
  .pi-proj-title{font-size:clamp(24px,7vw,32px);}
}

.pi-proj-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
.pi-proj--alt .pi-proj-grid{direction:rtl;}
.pi-proj--alt .pi-proj-grid > *{direction:ltr;}

.pi-proj-media{
  position:relative; border-radius:10px; overflow:hidden; aspect-ratio:16/10; background:#0c0c0e;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 70px -36px rgba(0,0,0,.8);
}
.pi-proj-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.pi-proj:hover .pi-proj-media img{transform:scale(1.05);}
/* a hair of grain plus an inner vignette so the photo reads as a printed
   dossier still rather than a clean marketing render */
.pi-proj-media::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background:var(--grain);
  box-shadow:inset 0 0 60px rgba(0,0,0,.45);
}
@media (prefers-reduced-motion: reduce){ .pi-proj-media img{transition:none;} }

.pi-proj-info{display:flex; flex-direction:column; gap:18px;}
.pi-proj-stat{display:flex; align-items:baseline; gap:24px;}
.pi-proj-pct{font-family:var(--ff-display); font-size:clamp(46px,5.5vw,60px); font-weight:800; color:#fff; line-height:1;}
.pi-proj-status{display:flex; flex-direction:column; gap:5px;}
.pi-proj-status span{font-family:var(--ff-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--silver-3);}
.pi-proj-status b{font-family:var(--ff-mono); font-size:14px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--silver-1);}
.pi-card-progress-track{position:relative; height:3px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden;}
.pi-card-progress-fill{position:absolute; inset:0 auto 0 0; height:100%; border-radius:2px; background:var(--orange);}
.pi-proj-next{font-family:var(--ff-mono); font-size:12.5px; color:var(--silver-3);}

@media (max-width:780px){
  .pi-proj-grid{grid-template-columns:1fr; gap:28px;}
  .pi-proj--alt .pi-proj-grid{direction:ltr;}
  .pi-proj-media{aspect-ratio:16/10;}
}

/* ---- ACCESS / NOTIFY — kept functional (same form/JS as before). White,
   centered close to the page — the one clear CTA at the very end, with
   the thin-border button treatment used earlier on this page. ---- */
.pi-access{position:relative; background:var(--white); color:var(--ink); padding:90px 0 110px; text-align:center;}
.pi-access-wrap{display:flex; flex-direction:column; align-items:center; gap:28px;}
.pi-access-copy{max-width:480px;}
.pi-access-copy h2{color:var(--ink); font-size:clamp(24px,2.6vw,32px);}
.pi-access-copy p{color:var(--silver-3); font-size:14.5px; margin-top:14px;}
.pi-access-form-wrap{width:100%; max-width:440px;}
.pi-access-form{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.pi-access-form input{
  flex:1; min-width:220px;
  background:var(--white); border:1px solid var(--line); border-radius:2px;
  padding:15px 18px; color:var(--ink); font-family:var(--ff-body); font-size:14px;
  transition:border-color .25s ease, background .25s ease;
}
.pi-access-form input::placeholder{color:var(--silver-2);}
.pi-access-form input:focus{border-color:var(--orange);}
/* .btn-primary's own base is just border:1px solid transparent — this
   gives the "Avísame" button its own crisp, thin orange outline instead,
   so it reads as a deliberate accent rather than the default CTA */
.pi-access-form .btn-primary{border:1px solid rgba(232,119,34,.55);}
.pi-access-status{margin:14px 0 0; font-family:var(--ff-mono); font-size:12.5px; color:var(--silver-3); min-height:1em;}
.pi-access-status.is-success{color:var(--orange);}

@media (max-width:900px){
  .pi-hero{min-height:560px;}
  .pi-hero-copy{max-width:none;}
  .pi-hero-scrim{
    background:
      linear-gradient(180deg, rgba(8,8,10,.4) 0%, rgba(8,8,10,.55) 40%, rgba(8,8,10,.92) 100%);
  }
}
@media (max-width:700px){
  .pi-hero{padding:140px 0 70px;}
  .pi-access-wrap{align-items:stretch;}
  .pi-access-form{flex-direction:column; align-items:stretch;}
}