/* =========================================================
   Imcardecsa · home.css — solo la portada. Requiere base.css.
   ========================================================= */
/* ── hero + franja de specs ─────────────────── */
.hero{position:relative;background:var(--navy-900);color:#fff;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% 50%;opacity:.92}
.hero__veil{position:absolute;inset:0;
  background:
   linear-gradient(96deg,var(--navy-900) 0%,rgba(13,22,49,.94) 34%,rgba(13,22,49,.55) 58%,rgba(13,22,49,.15) 84%),
   linear-gradient(180deg,rgba(13,22,49,.5) 0%,transparent 30%)}
.hero__in{position:relative;max-width:var(--maxw);margin:0 auto;
  padding:clamp(72px,11vw,132px) var(--pad) 0;min-height:clamp(520px,80vh,780px);
  display:flex;flex-direction:column;justify-content:center}
.hero__eyebrow{color:#8FA0C8;display:flex;align-items:center;gap:12px;margin-bottom:26px}
.hero__eyebrow::before{content:'';width:34px;height:2px;background:var(--red);flex:none}
.hero h1{font-size:clamp(40px,6.4vw,86px);max-width:15ch;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero__sub{max-width:50ch;font-size:clamp(15.5px,1.5vw,18px);color:#C4CCE0;margin-bottom:36px}
.hero__acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:clamp(48px,7vw,78px)}

.specstrip{position:relative;background:rgba(13,22,49,.86);
  border-top:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.specstrip__in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr)}
.spec{padding:22px 26px 24px;border-left:1px solid rgba(255,255,255,.14)}
.spec:first-child{border-left:0;padding-left:0}
.spec__k{color:var(--red);display:block;margin-bottom:9px}
.spec__v{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#DDE3F0;
  letter-spacing:.02em;line-height:1.5}


/* ── operación + manifiesto ─────────────────── */
.op{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:start}
.op__lead{font-size:clamp(16px,1.6vw,19px);color:var(--ink-60);max-width:46ch;margin-top:22px}
.op__lead strong{color:var(--ink);font-weight:600}
.op__fig{position:relative}
.op__fig img{width:100%;height:clamp(280px,38vw,440px);object-fit:cover}
.op__tag{position:absolute;left:0;bottom:0;background:var(--red);color:#fff;padding:9px 14px}

.manifest{margin-top:44px;border-top:1px solid var(--navy)}
.manifest__row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line)}
.manifest__k{color:var(--ink-60)}
.manifest__v{font-family:'Archivo',sans-serif;font-weight:700;font-weight:700;font-variation-settings:'wdth' 112,'wght' 700;
  font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;color:var(--navy);
  font-variant-numeric:tabular-nums}
.manifest__v small{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.1em;color:var(--red);margin-left:8px;text-transform:uppercase}


/* ── grilla de cortes ───────────────────────── */
.cat__head{display:flex;justify-content:space-between;align-items:end;gap:28px;
  flex-wrap:wrap;margin-bottom:46px}
.cat__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.card{background:var(--paper);display:flex;flex-direction:column}
.card__ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-900)}
.card__ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.card:hover .card__ph img{transform:scale(1.05)}
.card__code{position:absolute;top:0;left:0;background:var(--navy-900);color:#8FA0C8;padding:7px 11px}
.card__b{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.card__n{font-family:'Archivo',sans-serif;font-weight:700;font-weight:700;font-variation-settings:'wdth' 112,'wght' 700;
  text-transform:uppercase;letter-spacing:-.01em;font-size:21px;color:var(--navy);margin-bottom:16px}
.card__specs{border-top:1px solid var(--line);margin-top:auto}
.card__s{display:grid;grid-template-columns:88px 1fr;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:11.5px}
.card__s:last-child{border-bottom:0}
.card__s b{color:var(--red);font-weight:500;text-transform:uppercase;letter-spacing:.09em;font-size:10px;
  align-self:center}
.card__s span{color:var(--ink);letter-spacing:.01em}


/* ── cadena de frío (teaser) ────────────────── */
.chain__top{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(30px,5vw,64px);
  align-items:end;margin-bottom:clamp(48px,6vw,72px)}
.chain__lead{color:#B9C3DC;max-width:44ch;font-size:clamp(15px,1.5vw,17px)}
.chain__temp{position:relative;margin-bottom:14px}
.chain__temp .dsp{font-size:clamp(46px,7vw,88px);color:var(--red)}
.chain__temp .mono{color:#8FA0C8;margin-top:8px;display:block}
.chain__track{position:relative;padding-top:38px}
.chain__line{position:absolute;top:5px;left:0;right:0;height:1px;background:rgba(255,255,255,.2)}
.chain__line::after{content:'';position:absolute;inset:0;background:var(--red);
  transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.4,0,.1,1) .1s}
.is-in .chain__line::after{transform:scaleX(1)}
.chain__steps{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.step{position:relative;padding-right:10px}
.step::before{content:'';position:absolute;top:-38px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--navy);box-shadow:0 0 0 2px var(--red);
  opacity:0;transform:scale(.4);transition:opacity .4s,transform .4s}
.is-in .step::before{opacity:1;transform:scale(1)}
.is-in .step:nth-child(1)::before{transition-delay:.15s}
.is-in .step:nth-child(2)::before{transition-delay:.3s}
.is-in .step:nth-child(3)::before{transition-delay:.45s}
.is-in .step:nth-child(4)::before{transition-delay:.6s}
.is-in .step:nth-child(5)::before{transition-delay:.75s}
.is-in .step:nth-child(6)::before{transition-delay:.9s}
.step__n{color:var(--red);display:block;margin-bottom:8px}
.step__t{font-family:'Archivo',sans-serif;font-weight:700;font-variation-settings:'wdth' 108,'wght' 700;
  text-transform:uppercase;font-size:14px;letter-spacing:-.005em;margin-bottom:6px;color:#fff}
.step__d{font-size:13.5px;color:#96A2C2;line-height:1.5}


/* ── portal + mock de UI ────────────────────── */
.portal{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,70px);align-items:center}
.portal__lead{color:var(--ink-60);margin-top:20px;max-width:40ch}
.portal__list{margin-top:30px;border-top:1px solid var(--line)}
.portal__li{padding:16px 0;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:auto 1fr;gap:14px;align-items:start}
.portal__li i{width:7px;height:7px;background:var(--red);margin-top:9px;flex:none;font-style:normal}
.portal__li b{display:block;font-weight:600;font-size:15.5px;color:var(--navy)}
.portal__li span{font-size:14px;color:var(--ink-60)}

.ui{background:var(--navy-900);box-shadow:0 30px 70px -30px rgba(13,22,49,.5);overflow:hidden}
.ui__bar{display:flex;align-items:center;gap:14px;padding:11px 16px;background:var(--navy-800);
  border-bottom:1px solid rgba(255,255,255,.1)}
.ui__dots{display:flex;gap:6px}
.ui__dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}
.ui__url{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:#8FA0C8;letter-spacing:.06em}
.ui__body{padding:22px}
.ui__hi{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:18px}
.ui__hi h4{font-family:'Archivo',sans-serif;font-weight:700;font-weight:700;font-variation-settings:'wdth' 112,'wght' 700;
  text-transform:uppercase;color:#fff;font-size:17px;letter-spacing:-.01em}
.ui__hi p{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#8FA0C8;
  letter-spacing:.11em;text-transform:uppercase;margin-top:5px}
.ui__pill{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 9px;background:rgba(212,61,60,.16);color:#F08A89;
  border:1px solid rgba(212,61,60,.4)}
.ui__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1);margin-bottom:18px}
.uic{background:var(--navy-800);padding:14px}
.uic__k{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:#8FA0C8;display:block;margin-bottom:9px}
.uic__v{font-family:'Archivo',sans-serif;font-weight:700;font-variation-settings:'wdth' 108,'wght' 700;
  font-size:22px;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.uic__v.red{color:var(--red)}
.uic__bar{height:3px;background:rgba(255,255,255,.14);margin-top:11px}
.uic__bar i{display:block;height:100%;background:var(--red);width:62%}
.ui__tbl{border:1px solid rgba(255,255,255,.1)}
.ui__tr{display:grid;grid-template-columns:1.1fr 1fr .8fr .9fr;gap:10px;padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;color:#C4CCE0;letter-spacing:.02em;align-items:center}
.ui__tr:last-child{border-bottom:0}
.ui__tr--h{background:var(--navy-800);color:#8FA0C8;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase}
.tag{font-size:9px;letter-spacing:.09em;text-transform:uppercase;padding:3px 7px;justify-self:start}
.tag--ok{background:rgba(255,255,255,.1);color:#A9E0B8}
.tag--pend{background:rgba(212,61,60,.16);color:#F08A89}
.tag--via{background:rgba(255,255,255,.08);color:#8FA0C8}


/* ── banda de panel interno ─────────────────── */
.admin{margin-top:clamp(60px,7vw,92px);border-top:1px solid var(--line);padding-top:clamp(40px,5vw,60px)}
.admin__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  margin-top:28px;border:1px solid var(--line)}
.adm{background:var(--paper);padding:20px}
.adm__k{color:var(--red);display:block;margin-bottom:10px}
.adm__t{font-weight:600;font-size:15px;color:var(--navy);margin-bottom:5px}
.adm__d{font-size:13.5px;color:var(--ink-60);line-height:1.5}


/* ── responsive ─────────────────────────────── */
@media(max-width:1000px){
  .specstrip__in{grid-template-columns:1fr 1fr}
  .spec{border-left:1px solid rgba(255,255,255,.14);padding-left:26px}
  .spec:nth-child(odd){border-left:0;padding-left:0}
  .spec:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}
  .op,.chain__top,.portal{grid-template-columns:1fr}
  .chain__steps{grid-template-columns:repeat(3,1fr);gap:34px 14px}
  .chain__track{padding-top:30px}
  .chain__line{display:none}
  .step::before{top:-22px}
  .cat__grid{grid-template-columns:repeat(2,1fr)}
  .admin__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .cat__grid,.admin__grid{grid-template-columns:1fr}
  .chain__steps{grid-template-columns:1fr 1fr}
  .ui__cards{grid-template-columns:1fr}
  .ui__tr{grid-template-columns:1fr 1fr;gap:6px}
  .ui__tr>*:nth-child(n+3){display:none}
  .ui__tr--h{display:none}
  .hero__img{object-position:66% 50%}
  .hero__veil{background:linear-gradient(180deg,rgba(13,22,49,.93) 0%,rgba(13,22,49,.84) 52%,rgba(13,22,49,.58) 100%)}
  .hero__in{min-height:auto;padding-top:56px}
}
@media(prefers-reduced-motion:reduce){
  .chain__line::after{transform:scaleX(1)}
  .step::before{opacity:1;transform:scale(1)}
}