/* Camada do protótipo v2 por cima do design system XY (xy.css). Só layout das páginas novas. */
body{ background:var(--theme-background-default); color:var(--theme-text-default); }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.home-hero-slide--video video.media-obj{ width:100%; height:100%; object-fit:cover; }

/* Home: lista de projetos */
.proj-list{ display:grid; gap:var(--space-12); }
.proj{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:var(--grid-column-gutter); align-items:end; color:inherit; text-decoration:none; }
.proj-media{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:.8rem; aspect-ratio:16/8; }
.proj-media img,.proj-media video{ width:100%; height:100%; object-fit:cover; border-radius:var(--border-radius-media-thumb); transition:transform .9s var(--ease-out-expo,ease), filter .6s; }
.proj-media--one{ grid-template-columns:1fr; }
.proj:hover .proj-media img{ transform:scale(1.02); }
.proj-meta{ display:grid; gap:1.2rem; align-content:end; padding-bottom:.4rem; }
.proj-meta .h2{ margin:0; }
.proj-meta .body{ margin:0; max-width:36ch; }

/* cabeçalho de projeto */
.proj-hero,.film-hero{ position:relative; min-height:88vh; min-height:88svh; display:flex; align-items:flex-end; overflow:hidden; background:#0e0e0d; color:#fff; }
.proj-hero-img,.film-hero-v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.proj-hero::after,.film-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%); }
.proj-hero-in{ position:relative; z-index:2; padding:0 var(--grid-outer-gutter) var(--space-8); display:grid; gap:1.6rem; width:100%; }
.proj-hero-in .display,.proj-hero-in p{ margin:0; }
.proj-hero-in .eyebrow{ color:rgba(255,255,255,.72); }

/* índice de séries */
.serie-index{ border-top:1px solid var(--theme-border-light); padding-top:2rem; margin-bottom:var(--space-12); }
.serie-index ol{ list-style:none; margin:1.2rem 0 0; padding:0; columns:3; column-gap:var(--grid-column-gutter); }
.serie-index li{ break-inside:avoid; }
.serie-index a{ display:grid; grid-template-columns:3.2rem 1fr auto; gap:.8rem; padding:.9rem 0; border-bottom:1px solid var(--theme-border-light); color:inherit; text-decoration:none; }
.serie-index a:hover{ color:var(--color-halation-glow,#ff6a3d); }

/* série */
.serie{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.6fr); gap:var(--grid-column-gutter); padding:var(--space-8) 0; border-top:1px solid var(--theme-border-light); scroll-margin-top:8rem; }
.serie-head{ position:sticky; top:9rem; align-self:start; display:grid; gap:1rem; }
.serie-head .h2,.serie-head p{ margin:0; }
.mason{ columns:3; column-gap:.8rem; }
.mason .ph{ display:block; break-inside:avoid; margin:0 0 .8rem; }
.serie .mason{ columns:3; }
.ph img{ display:block; width:100%; height:auto; border-radius:var(--border-radius-media-thumb); transition:opacity .4s, transform .9s var(--ease-out-expo,ease); }
.ph:hover img{ opacity:.9; }
.ph--wide{ display:block; margin:.8rem 0 1.6rem; }
.india .mason{ columns:3; }
.next-proj{ margin-top:var(--space-12); padding-top:2rem; border-top:1px solid var(--theme-border-light); }

/* filmes */
.films{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6) var(--grid-column-gutter); }
.film{ margin:0; }
.film-media{ position:relative; aspect-ratio:var(--ratio,16/9); overflow:hidden; border-radius:var(--border-radius-media-thumb); background:#000; }
.film-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.gcomps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8) var(--grid-column-gutter); }
.gcomp{ margin:0; }
.gcomp-box{ position:relative; aspect-ratio:var(--ratio,16/9); overflow:hidden; border-radius:var(--border-radius-media-thumb); background:#000; cursor:ew-resize; touch-action:pan-y; --x:50%; }
.gcomp-box video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gcomp-log{ position:absolute; top:0; bottom:0; left:0; width:var(--x); z-index:1;
  -webkit-backdrop-filter:saturate(.18) contrast(.62) brightness(1.18) sepia(.08); backdrop-filter:saturate(.18) contrast(.62) brightness(1.18) sepia(.08); }
.gcomp-box .gcomp-line{ left:var(--x); }
.gcomp-box .grade-tag{ top:1.2rem; }
.grade-spec{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:1.2rem; border-top:1px solid var(--theme-border-light); }
.grade-spec div{ padding:1.2rem 0; }
.grade-spec b{ display:block; font-weight:485; margin-bottom:.4rem; color:var(--theme-text-default); }

/* blocos herdados do v1 */
.about-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--space-12); align-items:start; }
.about-grid > img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--border-radius-media-thumb); }
.side-service{ display:grid; grid-template-columns:8rem minmax(0,1fr) auto; gap:2rem; align-items:center; padding:2rem 0; border-top:1px solid var(--theme-border-light); border-bottom:1px solid var(--theme-border-light); margin-top:var(--space-6); scroll-margin-top:10rem; }
.side-service img{ width:8rem; aspect-ratio:4/5; object-fit:cover; filter:grayscale(1); }
.kodo-band{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-6); align-items:end; }
.note-proto{ position:fixed; left:max(12px,env(safe-area-inset-left,0px)); bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:60; }

@media (max-width:900px){
  .proj{ grid-template-columns:1fr; }
  .proj-media{ aspect-ratio:4/3; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
  .proj-media img:first-child{ grid-row:1/3; }
  .proj-media--one{ grid-template-columns:1fr; grid-template-rows:1fr; aspect-ratio:16/9; }
  .serie{ grid-template-columns:1fr; }
  .serie-head{ position:static; }
  .serie-index ol{ columns:1; }
  .mason,.india .mason{ columns:2; }
  .films,.gcomps{ grid-template-columns:1fr; }
  .about-grid,.kodo-band{ grid-template-columns:1fr; }
  .grade-spec{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:520px){
  .side-service{ grid-template-columns:6rem minmax(0,1fr); } .side-service .button{ grid-column:1/-1; justify-self:start; } .side-service img{ width:6rem; }
  .grade-spec{ grid-template-columns:1fr; }
}
.gcomp-line{ position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.75); z-index:2; box-shadow:0 0 18px 2px rgba(255,106,61,.55); }
.gcomp-line::before{ content:''; position:absolute; top:50%; left:50%; width:4.4rem; height:4.4rem; translate:-50% -50%; border:1px solid rgba(255,255,255,.8); border-radius:50%; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); background:rgba(14,14,13,.15); }
.gcomp-line::after{ content:'⟷'; position:absolute; top:50%; left:50%; translate:-50% -52%; color:#fff; font-size:1.6rem; }
.gcomp-box .grade-tag--log{ left:1.2rem; } .gcomp-box .grade-tag--grade{ right:1.2rem; }
.about-grid > img.about-photo{ aspect-ratio:2/3; object-position:center 30%; max-width:52rem; }
/* faixa de retrato corporativo (abaixo de Vídeo para empresas) */
.rc-band{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2.4rem; align-items:center; margin-top:var(--space-6); padding:2rem 0; border-top:1px solid var(--theme-border-light); border-bottom:1px solid var(--theme-border-light); }
.rc-thumbs{ display:flex; gap:.6rem; }
.rc-thumb{ display:block; width:6.4rem; aspect-ratio:4/5; overflow:hidden; border-radius:var(--border-radius-media-thumb); }
.rc-thumb img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .4s, transform .6s; }
.rc-thumb:hover img{ filter:none; transform:scale(1.04); }
.rc-actions{ display:flex; gap:1.6rem; align-items:center; }
.rc-gal{ columns:4; }
@media (max-width:900px){ .rc-band{ grid-template-columns:1fr; } .rc-thumb{ width:calc((100% - 3rem)/6); } .rc-thumbs{ width:100%; } .rc-gal{ columns:2; } }
/* mobile: alvos de toque maiores */
@media (max-width:900px){
  .rc-text a, .rc-actions .textlink, .site-footer .caption a{ display:inline-block; padding:.9rem 0; }
  .rc-actions{ gap:2.4rem; }
  .rc-actions .button{ min-height:4.4rem; }
  .proj-hero, .film-hero{ min-height:78svh; }
}