/* página da Cazé TV. Descrição à esquerda, iPhone à direita (foto gerada no Figma, só o aparelho, tela vazada)
   e um feed de Instagram dentro dele que anda com o scroll da página. Cores e fontes vêm do comum.css. */
.page-caze {
  background: var(--bg); color: var(--ink); font-family: var(--sans);
}
.page-caze .foot { position: relative; z-index: 2; }

.cz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0 clamp(24px, 4vw, 72px); padding: 0 var(--gutter); }

/* ---------- descrição: as mesmas regras de texto e divisórias da home (css/comum.css / css/base.css) ---------- */
.cz__info { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; max-width: 540px; padding: 76px 0 84px; }
.cz__back { color: var(--ink-3); text-decoration: none; margin-bottom: auto; align-self: flex-start; }
.cz__back:hover { color: var(--ink); }
/* como o cabeçalho de seção da home: número entre parênteses em cobalto + legenda em mono cinza, linha embaixo */
.cz__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cz__n { font-weight: 300; font-size: clamp(22px, 2.2vw, 32px); line-height: 1; color: var(--accent); }
.cz__c { color: var(--ink-3); }
.cz__title { font-family: var(--sans); font-weight: 400; font-size: clamp(56px, 7.4vw, 120px); letter-spacing: -.045em; line-height: .9; margin: 0; }
.cz__lede { margin: 18px 0 0; font-family: var(--sans); font-weight: 400; font-size: clamp(24px, 2.4vw, 38px); line-height: 1; letter-spacing: -.03em; color: var(--accent); }
.cz__desc { margin: 18px 0 0; max-width: 46ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; color: var(--ink-2); }
.cz__spec.lab__specs { margin: 24px 0 0; }
.cz__spec li { padding: 9px 0; }
.cz__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.cz__list li { border-bottom: 1px solid var(--line); }
.cz__list button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 10px; width: 100%; padding: 7px 0; color: var(--ink-3); transition: color .3s; }
.cz__list button i { font-style: normal; width: 2ch; }
.cz__list button:hover, .cz__list button:focus-visible { color: var(--ink); }
.cz__list .is-on button { color: var(--ink); }
.cz__list .is-on button i { color: var(--accent); }
.cz__ext { margin-top: 24px; align-self: flex-start; text-decoration: none; }

/* tela baixa (notebook): aperta o bloco pra caber inteiro sem cortar */
@media (min-width: 861px) and (max-height: 820px) {
  .cz__info { padding-bottom: 76px; }
  .cz__title { font-size: clamp(48px, 6vw, 88px); }
  .cz__lede { font-size: clamp(20px, 2vw, 30px); margin-top: 12px; }
  .cz__desc { font-size: 14px; margin-top: 12px; }
  .cz__spec.lab__specs { margin-top: 14px; } .cz__spec li { padding: 6px 0; }
  .cz__list { margin-top: 14px; } .cz__list button { padding: 4px 0; }
  .cz__ext { margin-top: 14px; }
}

/* botão: o mesmo da home (css/comum.css) */
.page-caze .btn { border-radius: 999px; padding: .95em 1.45em; border: 0; font-size: 12px; letter-spacing: .12em; background: var(--ink); color: var(--bg); }
.page-caze .btn:hover { background: var(--ink); }

/* ---------- a arte aberta grande ---------- */
/* sem setas na arte aberta (2026-11-08): a pessoa navega pela página, não de arte em arte */
.czl { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-columns: 1fr; align-items: center; gap: 12px; padding: 64px var(--gutter) 28px; background: rgba(12, 12, 12, .92); color: #fff; opacity: 0; transition: opacity .35s var(--e); }
.czl[hidden] { display: none; }
.czl.is-open { opacity: 1; }
.czl__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.czl__fig img { display: block; max-width: 100%; max-height: calc(100svh - 130px); width: auto; height: auto; aspect-ratio: 4 / 5; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); transform: scale(.96); transition: transform .45s var(--e); cursor: zoom-out; }
.czl.is-open .czl__fig img { transform: none; }
.czl__fig figcaption { color: rgba(255, 255, 255, .6); }
.czl__x { all: unset; position: absolute; top: 20px; right: var(--gutter); cursor: pointer; color: #fff; }
.czl__x:hover, .czl__x:focus-visible { text-decoration: underline; }
.czl__nav { all: unset; cursor: pointer; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; color: #fff; border: 1px solid rgba(255, 255, 255, .25); transition: background .25s, color .25s; }
.czl__nav:hover, .czl__nav:focus-visible { background: #fff; color: #121212; }
@media (max-width: 640px) { .czl { grid-template-columns: 1fr; } .czl__nav { display: none; } }
.cz__ext:hover { color: var(--accent); }

/* ---------- celular ---------- */
.cz__track { position: relative; height: 400vh; /* o JS ajusta pela altura do feed */ }
.cz__stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; }
.cz__phone { position: relative; height: min(calc(100svh - 64px), 1000px); aspect-ratio: 496 / 966; max-width: 100%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)) drop-shadow(0 18px 30px rgba(0, 0, 0, .16)) drop-shadow(0 50px 60px rgba(0, 0, 0, .12)); }
.cz__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; user-select: none; }

/* a tela: um pouco maior que o buraco da foto (a moldura cobre as bordas e os cantos) */
.ig { --u: calc(100cqw / 390); container-type: inline-size; position: absolute; left: 6.25%; top: 2.38%; width: 87.5%; height: 95.24%;
  border-radius: 13% / 6.2%; overflow: hidden; background: #fff; color: #000; z-index: 1;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.ig svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.ig__status { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: calc(var(--u) * 54); display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 6) calc(var(--u) * 30) 0 calc(var(--u) * 44); background: #fff; }
.ig__time { font-weight: 600; font-size: calc(var(--u) * 16.5); letter-spacing: -.01em; }
.ig__sys { display: flex; gap: calc(var(--u) * 6); align-items: center; }
.ig__sys svg { fill: currentColor; stroke: none; height: calc(var(--u) * 12); width: auto; }

.ig__bar { position: absolute; z-index: 3; top: calc(var(--u) * 54); left: 0; right: 0; height: calc(var(--u) * 48); display: grid; grid-template-columns: calc(var(--u) * 44) 1fr calc(var(--u) * 44); align-items: center; padding: 0 calc(var(--u) * 8); background: #fff; border-bottom: 1px solid #efefef; }
.ig__i { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.ig__bar-t { text-align: center; line-height: 1.15; }
.ig__bar-t small { display: block; font-size: calc(var(--u) * 12); color: #737373; font-weight: 600; letter-spacing: .02em; }
.ig__bar-t b { font-size: calc(var(--u) * 16); font-weight: 700; }

.ig__feed { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--u) * 102) 0 calc(var(--u) * 92); will-change: transform; }
.ig__tabs { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 84); display: flex; justify-content: space-around; align-items: flex-start; padding-top: calc(var(--u) * 12); background: #fff; border-top: 1px solid #efefef; }
.ig__tabs svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.ig__tabs img { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; outline: 1.5px solid #000; outline-offset: 1px; }
.ig__home { position: absolute; z-index: 4; left: 50%; bottom: calc(var(--u) * 8); width: calc(var(--u) * 134); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -67); border-radius: 9px; background: #000; }

/* post */
.igp { padding-bottom: calc(var(--u) * 14); }
.igp__head { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 54); padding: 0 calc(var(--u) * 12); }
.igp__av { width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: 50%; padding: calc(var(--u) * 2); background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.igp__av img { display: block; width: 100%; height: 100%; border-radius: 50%; border: calc(var(--u) * 2) solid #fff; box-sizing: border-box; }
.igp__who { flex: 1; line-height: 1.2; min-width: 0; }
.igp__name { display: flex; align-items: center; gap: calc(var(--u) * 4); font-weight: 600; font-size: calc(var(--u) * 14); }
.igp__name svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); stroke: none; }
.igp__loc { font-size: calc(var(--u) * 12); color: #262626; }
.igp__more { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.igp__more circle { fill: currentColor; stroke: none; }
.igp__media { position: relative; aspect-ratio: 4 / 5; background: #efefef; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.igp__media img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.igp__pop { position: absolute; left: 50%; top: 50%; width: 28%; height: auto; margin: -14% 0 0 -14%; fill: #fff; stroke: none !important; opacity: 0; transform: scale(0); filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .35)); pointer-events: none; }
.igp__pop.is-go { animation: igpop .9s var(--e); }
@keyframes igpop { 0% { opacity: 0; transform: scale(0); } 18% { opacity: 1; transform: scale(1.15); } 30% { transform: scale(.95); } 42% { transform: scale(1); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4) translateY(-30%); } }
.igp__acts { display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 6); }
.igp__acts button { all: unset; cursor: pointer; display: grid; -webkit-tap-highlight-color: transparent; }
.igp__acts svg { width: calc(var(--u) * 25); height: calc(var(--u) * 25); }
.igp__acts .igp__save { margin-left: auto; }
.igp__like.is-on svg { fill: #ff3040; stroke: #ff3040; animation: iglike .45s var(--e); }
@keyframes iglike { 40% { transform: scale(1.25); } }
.igp__cap { margin: 0; padding: 0 calc(var(--u) * 12); font-size: calc(var(--u) * 14); line-height: 1.35; }
.igp__cap b { font-weight: 600; margin-right: .3em; }
.igp__cap span { color: #00376b; }
.igp__when { padding: calc(var(--u) * 6) calc(var(--u) * 12) 0; font-size: calc(var(--u) * 11); color: #737373; }

/* ---------- celular (tela estreita): descrição em cima, celular grudado embaixo ---------- */
@media (max-width: 860px) {
  .cz { grid-template-columns: minmax(0, 1fr); }
  .cz__info { position: relative; height: auto; max-width: none; padding: 96px 0 24px; }
  .cz__back { margin-bottom: 40px; }
  .cz__list { display: none; }
  .cz__ext { margin-top: 24px; }
  /* aqui o limite é a largura: o aparelho nunca passa da tela */
  .cz__phone { height: auto; width: min(100%, calc((100svh - 76px) * 496 / 966), 440px); }
}
@media (prefers-reduced-motion: reduce) { .igp__pop.is-go, .igp__like.is-on svg { animation: none; } }