/* ============================================================
   Cinelli Brand Studio — Site de Cases
   Tokens + estilos compartilhados (home + páginas de case)
   ============================================================ */

:root{
  /* Padrão oficial Cinelli Brand Studio */
  --bg:#EDEDED;
  --bg-2:#E3E2E1;
  --red:#A33927;
  --dark:#181818;
  --light:#F2F2F2;
  --ghost:#C7C6C6;
  --gray:#969696;

  --surface:var(--bg);
  --surface-raised:var(--bg-2);
  --surface-inverse:var(--dark);

  --ink-strong:var(--dark);
  --ink:rgba(24,24,24,.86);
  --ink-muted:var(--gray);
  --ink-faint:var(--ghost);
  --ink-inverse:var(--light);

  --line:rgba(24,24,24,.09);
  --line-strong:rgba(24,24,24,.16);
  --ink-52:rgba(24,24,24,.52);

  --accent:var(--red);

  --vr:20px;
  --gutter:32px;
  --max:1400px;
  --header-h:99.2px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:360ms;
  --step:90ms;

  --r-sm:16px;
  --r-md:26px;
  --r-lg:32px;
  --r-pill:100px;
}

[data-theme="dark"]{
  --bg:#181818;
  --bg-2:#222222;
  --light:#181818;

  --surface:var(--bg);
  --surface-raised:var(--bg-2);
  --surface-inverse:#F2F2F2;

  --ink-strong:#F2F2F2;
  --ink:rgba(242,242,242,.86);
  --ink-muted:rgba(242,242,242,.60);
  --ink-faint:rgba(242,242,242,.38);
  --ink-inverse:#181818;

  --line:rgba(242,242,242,.14);
  --line-strong:rgba(242,242,242,.24);
  --ink-52:rgba(242,242,242,.52);

  --accent:#C1503C;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
}

html,body{
  margin:0;
  padding:0;
  background:var(--surface);
  color:var(--ink-strong);
}

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:400;
  font-kerning:normal;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

h1,h2,h3,h4,p{ margin:0; }
h1,h2,h3,h4,.eyebrow{ text-wrap:balance; }
p,li,figcaption{ text-wrap:pretty; }

a{ color:inherit; text-decoration:none; }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

img,video{ display:block; max-width:100%; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
  width:100%;
}

/* ---------- Nav (padrão oficial Cinelli — cabeçalho fixo) ---------- */
body{ padding-top:var(--header-h); }

.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:40;
  background:var(--surface);
  padding-top:37.7px;
  padding-bottom:24px;
}

.site-nav .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.brand svg{
  height:18px;
  width:auto;
  flex-shrink:0;
  fill:currentColor;
  color:var(--ink-strong);
  transition:color var(--dur) var(--ease);
}

.nav-right{
  display:flex;
  align-items:center;
  gap:16px;
}

.nav-label{
  font-size:14px;
  font-weight:400;
  letter-spacing:-0.005em;
  color:var(--ink-strong);
  padding:9px 14px;
  border-radius:8px;
}

.back-link{
  font-size:14px;
  font-weight:400;
  letter-spacing:-0.005em;
  color:var(--ink-strong);
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px 14px;
  border-radius:8px;
  transition:color .2s ease, background .16s ease;
}
.back-link:hover{ color:var(--accent); background:rgba(24,24,24,.04); }
.back-link svg{ width:12px; height:12px; }

.theme-toggle{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--ink-52);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.theme-toggle:hover{ background:var(--line); }
.theme-toggle svg{ width:15px; height:15px; }
.theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }

/* ---------- WhatsApp flutuante ---------- */
.wa-float{
  position:fixed;
  right:24px; bottom:24px;
  width:56px; height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.4);
  z-index:60;
  transition:transform .25s var(--ease);
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float svg{ width:28px; height:28px; fill:#fff; }

@media (max-width:720px){
  .wa-float{ right:16px; bottom:16px; width:50px; height:50px; }
  .wa-float svg{ width:25px; height:25px; }
}

/* ---------- Rastro (padrão oficial Cinelli — etiqueta que segue o cursor) ---------- */
.rastro{ position:fixed; top:0; left:0; z-index:95; pointer-events:none; will-change:transform; }
.rastro-in{
  display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:4px;
  background:rgba(237,237,237,.92);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  color:var(--dark); white-space:nowrap;
  font-size:16px; font-weight:400; letter-spacing:-0.005em;
  transform:translate(var(--rx,-50%),var(--ry,46px)) scale(0);
  transform-origin:center top;
  opacity:0;
  transition:opacity .28s ease .15s, transform .28s cubic-bezier(.22,.61,.36,1) .15s;
}
.rastro.so-icone .rastro-in{ padding:12px; gap:0; }
.rastro.is-on .rastro-in{ transform:translate(var(--rx,-50%),var(--ry,46px)) scale(1); opacity:1; }
.rastro-txt{ display:inline-block; }
.rastro-icon{ display:none; width:18px; height:18px; color:var(--accent); }
.rastro-icon svg{ width:100%; height:100%; display:block; }
.rastro.so-icone .rastro-txt{ display:none; }
.rastro.so-icone .rastro-icon{ display:block; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rastro-in{ background:rgba(237,237,237,.98); }
}

/* ---------- Footer ---------- */
.site-footer{
  padding:64px 0 48px;
  border-top:1px solid var(--line);
  margin-top:96px;
}

.site-footer .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.site-footer .f-name{
  font-size:16px;
  font-weight:400;
}

.site-footer .f-tagline{
  font-size:13px;
  color:var(--ink-muted);
  margin-top:6px;
}

/* ============================================================
   HOME — seção de cases
   ============================================================ */

.hero-eyebrow{
  padding:56px 0 8px;
}

.eyebrow{
  font-size:12px;
  font-weight:400;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
}

.section-title{
  font-size:clamp(28px,4vw,40px);
  font-weight:300;
  margin:10px 0 40px;
}

.case-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--gutter);
  padding-bottom:80px;
}

.case-card{
  position:relative;
  display:block;
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--surface-inverse);
}

.case-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}

.case-card:hover img{ transform:scale(1.04); }

.case-card .tint{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
    var(--case-color, rgba(0,0,0,.15));
  mix-blend-mode:multiply;
  opacity:.55;
  pointer-events:none;
}

.case-card .label{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  color:#F5F2ED;
  width:100%;
  padding:0 24px;
}

.case-card .label .name{
  display:block;
  font-size:clamp(24px,3vw,34px);
  font-weight:300;
  letter-spacing:-0.01em;
}

.case-card .label .sub{
  display:block;
  margin-top:6px;
  font-size:13px;
  font-weight:400;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(245,242,237,.72);
}

.case-card .arrow{
  position:absolute;
  right:20px; bottom:18px;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(247,247,247,.92);
  color:var(--surface-inverse);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease);
}
.case-card:hover .arrow{ transform:rotate(45deg); }
.case-card .arrow svg{ width:15px; height:15px; }

@media (max-width:760px){
  .case-grid{ grid-template-columns:1fr; }
  .case-card{ aspect-ratio:4/5; }
}

/* ============================================================
   PÁGINA DE CASE
   ============================================================ */

.case-header{
  padding-top:48px;
  padding-bottom:40px;
}

.case-header .client-name{
  font-size:clamp(38px,6vw,68px);
  font-weight:300;
  letter-spacing:-0.01em;
}

.case-header .client-sub{
  margin:6px 0 0;
  font-size:19px;
  font-weight:400;
  color:var(--ink-faint);
}

.media-hero{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  aspect-ratio:16/9;
  background:var(--surface-inverse);
  cursor:zoom-in;
  margin-bottom:80px;
}

.media-hero img,
.media-hero video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.case-media-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  width:100%;
}

.media-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-sm);
  aspect-ratio:16/9;
  background:var(--surface-inverse);
  cursor:zoom-in;
}

.media-item img,
.media-item video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.media-item.no-crop{
  aspect-ratio:1195/1000;
  background:var(--surface-inverse);
}
.media-item.no-crop img{
  object-fit:contain;
}

.media-item.span-2{
  grid-column:1 / -1;
}
.media-item.span-2.no-crop{
  aspect-ratio:auto;
  height:auto;
}
.media-item.span-2.no-crop img{
  width:100%;
  height:auto;
  object-fit:initial;
}

@media (max-width:760px){
  .case-media-grid{ grid-template-columns:1fr; }
  .media-hero{ margin-bottom:10px; border-radius:var(--r-sm); }
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(10,10,10,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:40px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }

.lightbox-dialog{
  position:relative;
  display:inline-flex;
  max-width:min(1100px,84vw);
  max-height:85vh;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}

.lightbox-dialog img,
.lightbox-dialog video{
  display:block;
  max-width:min(1100px,84vw);
  max-height:85vh;
  width:auto;
  height:auto;
  object-fit:contain;
}

.lightbox-close{
  position:absolute;
  top:16px; right:16px;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(247,247,247,.3);
  background:rgba(10,10,10,.55);
  backdrop-filter:blur(8px);
  color:#F7F7F7;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:2;
}
.lightbox-close svg{ width:15px; height:15px; }

.lightbox-nav{
  flex-shrink:0;
  width:48px; height:48px;
  border-radius:50%;
  border:1px solid rgba(247,247,247,.25);
  background:rgba(247,247,247,.06);
  color:#F7F7F7;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .25s var(--ease);
}
.lightbox-nav:hover{ background:rgba(247,247,247,.16); }
.lightbox-nav svg{ width:20px; height:20px; }

@media (max-width:760px){
  .lightbox{
    padding:0;
    gap:0;
    background:#0A0A0A;
  }

  .lightbox-dialog{
    max-width:100vw;
    max-height:100vh;
    width:100vw;
    height:100vh;
    border-radius:0;
    box-shadow:none;
  }

  .lightbox-dialog img,
  .lightbox-dialog video{
    max-width:100vw;
    max-height:100vh;
    width:100vw;
    height:100vh;
    object-fit:contain;
  }

  .lightbox-close{ top:16px; right:16px; width:38px; height:38px; }

  .lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:38px; height:38px;
    background:rgba(10,10,10,.5);
    border-color:rgba(247,247,247,.2);
  }
  .lightbox-nav svg{ width:16px; height:16px; }
  [data-lightbox-prev]{ left:8px; }
  [data-lightbox-next]{ right:8px; }
}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-inview{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}

.no-js .reveal{ opacity:1 !important; transform:none !important; }