/* KUBOLAB redesign — Coleção Ice.
   A única página preta do site: o material da campanha (filme, reels, stills)
   foi feito sobre preto e só funciona sobre preto. O sistema continua o mesmo —
   Jost, P&B, nenhuma cor de destaque. O azul-gelo do briefing fica fora da
   interface: cor, aqui também, só existe na imagem. */

body.kbl-ice-page{ background:#0A0A0A; }
.kbl.ice-page{
  --ice-ground:#0A0A0A; --ice-raise:#141414; --ice-text:#F2F2F0;
  --ice-soft:rgba(242,242,240,.68); --ice-faint:rgba(242,242,240,.44);
  --ice-line:rgba(255,255,255,.14);
  background:var(--ice-ground); color:var(--ice-text);
}
.kbl.ice-page p{ margin:0; }
.kbl.ice-page h1, .kbl.ice-page h2, .kbl.ice-page h3{ margin:0; text-wrap:balance; }
.kbl.ice-page :focus-visible{ outline-color:#fff; }

/* header: continua escuro depois da rolagem (no resto do site ele vira branco) */
.kbl.ice-page header.scrolled{
  background:rgba(10,10,10,.88); border-bottom-color:var(--ice-line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.kbl.ice-page header.scrolled .logo img{ filter:brightness(0) invert(1); }
.kbl.ice-page header.scrolled nav.main-nav a{ color:rgba(255,255,255,.72); }
.kbl.ice-page header.scrolled nav.main-nav a:hover{ color:#fff; }
.kbl.ice-page header.scrolled .header-icons a{ color:#fff; }

/* o botão de WhatsApp é preto no site todo; aqui ele some no fundo, então inverte */
body.kbl-ice-page .kbl .kbl-wa{ background:#FFFFFF; color:#111111; box-shadow:0 4px 24px rgba(0,0,0,.55); }
body.kbl-ice-page .kbl .kbl-wa:hover{ background:rgba(255,255,255,.86); }
body.kbl-ice-page .kbl .kbl-wa-tip{ background:#FFFFFF; color:#111111; }

/* peças comuns */
.kbl.ice-page .ice-eyebrow{
  font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ice-faint);
}
.kbl.ice-page .is-empty{
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,#1C1B1A 0 12px,#121110 12px 24px);
}
.kbl.ice-page .ice-ph{
  font-size:11px; line-height:1.65; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.5); text-align:center; padding:0 16px;
}
.kbl.ice-page .ice-sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:36px;
}
.kbl.ice-page .ice-sec-head h2,
.kbl.ice-page .ice-reels-intro h2,
.kbl.ice-page .ice-close h2{
  font-weight:300; font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.04; letter-spacing:-.02em; color:#fff;
}

/* ---------- Hero: o filme ----------
   O filme é vertical (1080×1920). No desktop ele fica num quadro 9:16 da altura
   da tela, à direita, e a palavra ocupa o preto à esquerda; no mobile o próprio
   filme vira a tela inteira e o texto desce por cima dele. */
.kbl.ice-page .ice-hero{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;
  gap:clamp(24px,4vw,64px); min-height:100vh; min-height:100svh;
  padding:clamp(96px,13vh,132px) clamp(20px,4vw,48px) clamp(32px,5vh,56px);
  background:var(--ice-ground); overflow:hidden;
}
.kbl.ice-page .ice-hero-copy{ position:relative; z-index:2; display:flex; flex-direction:column; gap:clamp(28px,5vh,56px); padding-bottom:4px; }
.kbl.ice-page .ice-hero-mark{ display:flex; flex-direction:column; gap:10px; }
.kbl.ice-page .ice-hero-mark .ice-eyebrow{ color:rgba(255,255,255,.72); padding-left:.5em; }
/* o gesto da página: a palavra no peso mais fino do Jost, enorme, quase geada */
.kbl.ice-page .ice-title{
  font-weight:200; font-size:clamp(7rem,22vw,21rem); line-height:.76; letter-spacing:-.05em; color:#fff; margin-left:-.04em;
}
.kbl.ice-page .ice-hero-side{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.kbl.ice-page .ice-sign{
  font-weight:500; font-size:clamp(1.15rem,2vw,1.6rem); line-height:1.18; letter-spacing:-.01em; color:var(--ice-text);
}
.kbl.ice-page .ice-hero-cue{
  font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.4); transition:border-color .2s;
}
.kbl.ice-page .ice-hero-cue:hover{ border-bottom-color:#fff; }
.kbl.ice-page .ice-hero-film{
  position:relative; z-index:1; aspect-ratio:9/16; overflow:hidden; background:#000;
  height:calc(100svh - clamp(96px,13vh,132px) - clamp(32px,5vh,56px)); max-height:1000px; min-height:420px;
}
.kbl.ice-page .ice-hero-film video,
.kbl.ice-page .ice-hero-film img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.kbl.ice-page .ice-hero-scrim{ display:none; }

/* ---------- Manifesto ---------- */
.kbl.ice-page .ice-manifesto{
  padding:clamp(72px,11vw,150px) clamp(20px,4vw,48px); border-bottom:1px solid var(--ice-line);
}
.kbl.ice-page .ice-manifesto-grid{
  margin-top:28px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(32px,6vw,96px); align-items:end;
}
.kbl.ice-page .ice-manifesto h2{
  font-weight:300; font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.06; letter-spacing:-.02em; color:#fff;
}
.kbl.ice-page .ice-manifesto h2 em{ font-style:normal; font-weight:600; }
.kbl.ice-page .ice-manifesto-body{ display:flex; flex-direction:column; gap:16px; max-width:46ch; }
.kbl.ice-page .ice-manifesto-body p{ font-size:1rem; line-height:1.75; color:var(--ice-soft); }

/* ---------- Os três atos do filme ---------- */
.kbl.ice-page .ice-acts{ display:flex; flex-direction:column; }
.kbl.ice-page .ice-act{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-bottom:1px solid var(--ice-line);
}
.kbl.ice-page .ice-act.is-flip .ice-act-media{ order:2; }
.kbl.ice-page .ice-act-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#000; }
.kbl.ice-page .ice-act-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.kbl.ice-page .ice-act:hover .ice-act-media img{ transform:scale(1.03); }
.kbl.ice-page .ice-act-copy{
  display:flex; flex-direction:column; justify-content:center; gap:20px; padding:clamp(32px,6vw,96px);
}
.kbl.ice-page .ice-act h3{
  font-weight:300; font-size:clamp(2.2rem,4.6vw,4rem); line-height:1; letter-spacing:-.025em; color:#fff;
}
.kbl.ice-page .ice-act-text{ font-size:1rem; line-height:1.75; color:var(--ice-soft); max-width:40ch; }
.kbl.ice-page .ice-act-piece{
  margin-top:14px; display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:16px;
  padding:12px; border:1px solid var(--ice-line); max-width:440px; color:var(--ice-text);
  transition:border-color .2s, background .2s;
}
.kbl.ice-page a.ice-act-piece:hover{ border-color:rgba(255,255,255,.42); background:var(--ice-raise); }
.kbl.ice-page .ice-act-piece.no-link{ grid-template-columns:minmax(0,1fr); border-style:dashed; }
.kbl.ice-page .ice-act-thumb{ display:block; width:72px; height:72px; background:#fff; overflow:hidden; }
.kbl.ice-page .ice-act-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.kbl.ice-page .ice-act-meta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.kbl.ice-page .ice-act-meta .n{ font-weight:600; font-size:.95rem; color:#fff; }
.kbl.ice-page .ice-act-meta .pr{ font-size:.85rem; color:var(--ice-soft); }
.kbl.ice-page .ice-act-go{ color:var(--ice-faint); font-size:1.1rem; padding-right:6px; transition:transform .2s, color .2s; }
.kbl.ice-page a.ice-act-piece:hover .ice-act-go{ transform:translateX(4px); color:#fff; }

/* ---------- A coleção: todas as peças Ice ---------- */
.kbl.ice-page .ice-colecao{ padding:clamp(72px,10vw,130px) clamp(20px,4vw,48px); }
.kbl.ice-page .ice-count{
  font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ice-faint); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kbl.ice-page .ice-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--ice-line); border:1px solid var(--ice-line);
}
.kbl.ice-page .ice-card{ background:var(--ice-ground); color:var(--ice-text); display:flex; flex-direction:column; }
/* peça translúcida pede fundo branco atrás — a mesma decisão da faixa da Home */
.kbl.ice-page .ice-card-img{ position:relative; aspect-ratio:2/3; overflow:hidden; background:#FFFFFF; }
.kbl.ice-page .ice-card-img img{
  width:100%; height:100%; object-fit:contain; display:block; transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.kbl.ice-page .ice-card:hover .ice-card-img img{ transform:scale(1.04); }
.kbl.ice-page .ice-ready{
  position:absolute; top:12px; left:12px; z-index:2;
  font-weight:600; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; border-radius:2px; background:#111111; color:#FFFFFF;
}
.kbl.ice-page .ice-card-info{
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"type type" "name price";
  row-gap:4px; column-gap:12px; padding:18px 20px 22px;
}
.kbl.ice-page .ice-card-type{
  grid-area:type; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-faint);
}
.kbl.ice-page .ice-card-name{ grid-area:name; font-weight:600; font-size:1.05rem; color:#fff; }
.kbl.ice-page .ice-card-price{ grid-area:price; font-size:.9rem; color:var(--ice-soft); white-space:nowrap; }
.kbl.ice-page .ice-empty{ color:var(--ice-soft); max-width:52ch; }

/* ---------- Reels da campanha ---------- */
.kbl.ice-page .ice-reels{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(32px,5vw,72px); align-items:end;
  padding:clamp(72px,10vw,130px) clamp(20px,4vw,48px); border-top:1px solid var(--ice-line);
}
.kbl.ice-page .ice-reels-intro{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.kbl.ice-page .ice-reels-intro > p:not(.ice-eyebrow){ color:var(--ice-soft); line-height:1.75; max-width:36ch; }
.kbl.ice-page .ice-link{
  font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ice-soft);
}
.kbl.ice-page .ice-link:hover{ color:#fff; }
.kbl.ice-page .ice-reel-row{
  display:grid; grid-auto-flow:column; gap:16px; justify-content:end;
  grid-auto-columns:min(calc((100% - (var(--n) - 1) * 16px) / var(--n)), 42vh);
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
}
.kbl.ice-page .ice-reel{ margin:0; scroll-snap-align:start; display:flex; flex-direction:column; gap:12px; }
.kbl.ice-page .ice-reel-media{ position:relative; aspect-ratio:9/16; overflow:hidden; background:#000; }
.kbl.ice-page .ice-reel-media video,
.kbl.ice-page .ice-reel-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kbl.ice-page .ice-reel figcaption{ font-size:.9rem; font-weight:500; color:var(--ice-soft); }

/* ---------- Fecho ---------- */
.kbl.ice-page .ice-close{
  padding:clamp(80px,12vw,160px) clamp(20px,4vw,48px); border-top:1px solid var(--ice-line);
  display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center;
}
.kbl.ice-page .ice-close h2{ max-width:18ch; }
.kbl.ice-page .ice-close > p:not(.ice-eyebrow){ color:var(--ice-soft); max-width:52ch; line-height:1.75; }
.kbl.ice-page .ice-close-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:12px; }
.kbl.ice-page .ice-btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 24px; border-radius:2px;
  font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  background:#FFFFFF; color:#111111; border:1px solid #FFFFFF; transition:background .2s, border-color .2s;
}
.kbl.ice-page .ice-btn:hover{ background:rgba(255,255,255,.84); }
.kbl.ice-page .ice-btn.is-ghost{ background:transparent; color:#FFFFFF; border-color:rgba(255,255,255,.4); }
.kbl.ice-page .ice-btn.is-ghost:hover{ border-color:#FFFFFF; }

/* o rodapé do site continua branco: marca o fim da página preta */
.kbl.ice-page .ice-foot{ background:#FFFFFF; color:#111111; }
.kbl.ice-page .ice-foot :focus-visible{ outline-color:#111111; }

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .kbl.ice-page .ice-hero{ display:block; padding:0; min-height:100vh; min-height:100svh; }
  .kbl.ice-page .ice-hero-film{ position:absolute; inset:0; height:auto; min-height:0; max-height:none; aspect-ratio:auto; }
  .kbl.ice-page .ice-hero-scrim{
    display:block; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 20%),
               linear-gradient(0deg, #0A0A0A 0%, rgba(10,10,10,.62) 30%, rgba(10,10,10,0) 58%);
  }
  .kbl.ice-page .ice-hero-copy{
    position:absolute; left:0; right:0; bottom:0; gap:22px;
    padding:0 20px clamp(36px,7vh,64px);
  }
  .kbl.ice-page .ice-title{ font-size:clamp(6.5rem,38vw,11rem); }
  .kbl.ice-page .ice-manifesto-grid{ grid-template-columns:1fr; }
  .kbl.ice-page .ice-act{ grid-template-columns:1fr; }
  .kbl.ice-page .ice-act.is-flip .ice-act-media{ order:0; }
  .kbl.ice-page .ice-act-copy{ padding:32px 20px 52px; }
  .kbl.ice-page .ice-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kbl.ice-page .ice-card-info{ grid-template-columns:1fr; grid-template-areas:"type" "name" "price"; padding:14px 14px 18px; }
  .kbl.ice-page .ice-reels{ grid-template-columns:1fr; }
  .kbl.ice-page .ice-reel-row{ grid-auto-columns:64%; justify-content:start; }
}

@media (prefers-reduced-motion: reduce){
  .kbl.ice-page .ice-act-media img,
  .kbl.ice-page .ice-card-img img{ transition:none; }
  .kbl.ice-page .ice-act:hover .ice-act-media img,
  .kbl.ice-page .ice-card:hover .ice-card-img img{ transform:none; }
}