/* ============================================================
   EGM — trabalho (case study) page
   ============================================================ */
.trabalho-loading{ padding:160px 0; font-family:var(--font-mono); font-size:.9rem; color:var(--gray-600); }

.trabalho-hero{ padding:140px 0 56px; border-bottom:1px solid var(--line); }
.trabalho-back{ display:inline-block; font-family:var(--font-mono); font-size:.8rem; color:var(--gray-600); margin-bottom:2rem; border-bottom:1px dashed var(--gray-400); }
.trabalho-back:hover{ color:var(--ink); border-color:var(--ink); }
.trabalho-hero__title{ max-width:26ch; margin-bottom:1.5rem; }
.trabalho-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.trabalho-tags span{
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-600);
  border:1px solid var(--line); border-radius:100px; padding:.35em .9em;
}

/* ---------- stats bar ---------- */
.trabalho-stats-section{ border-bottom:1px solid var(--line); }
.trabalho-stats{ display:grid; grid-template-columns:repeat(3,1fr); }
.trabalho-stat{
  padding:2rem var(--gutter); display:flex; flex-direction:column; gap:.4rem;
  border-right:1px solid var(--line);
}
.trabalho-stat:last-child{ border-right:none; }
.trabalho-stat__value{ font-family:var(--font-display); font-size:1.8rem; }
.trabalho-stat__label{ font-size:.78rem; color:var(--gray-600); text-transform:uppercase; letter-spacing:.06em; }
.trabalho-stat--link{ transition:background .18s var(--ease); }
.trabalho-stat--link:hover{ background:var(--paper-dim); }
.trabalho-stat--link .trabalho-stat__value{ transition:transform .18s var(--ease); }
.trabalho-stat--link:hover .trabalho-stat__value{ transform:translateX(4px); }

@media (max-width:700px){
  .trabalho-hero{ padding:112px 0 40px; }
  .trabalho-stats{ grid-template-columns:1fr 1fr; padding:0; }
  .trabalho-stat{ padding:1.3rem var(--gutter); }
  .trabalho-stat__value{ font-size:1.45rem; }
  .trabalho-stat__label{ font-size:.72rem; }
  .trabalho-stat:nth-child(2){ border-right:none; }
  .trabalho-stat--link{ grid-column:1 / -1; flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:.75rem; border-top:1px solid var(--line); padding-top:1rem; padding-bottom:1rem; }
  .trabalho-stat--link .trabalho-stat__value{ font-size:1.1rem; }
}

/* ---------- galeria ----------
   Fotos em assets/{prefixo}{n}.png (smart1.png, plus1.png...).
   Todos os quadros têm o mesmo fundo claro; a imagem aparece inteira,
   "flutuando" com sombra. Celulares com fundo transparente ficam
   soltos no quadro; prints de tela viram cartões com canto arredondado. */
.trabalho-gallery-section{ padding:90px 0; border-bottom:1px solid var(--line); }
.trabalho-gallery-note{ margin-bottom:2.5rem; }
.trabalho-gallery-note[hidden]{ display:none; }
.trabalho-gallery-note[hidden] + .trabalho-gallery{ margin-top:2.25rem; }
.trabalho-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }

.trabalho-gallery__tile{
  display:flex; flex-direction:column; width:100%; padding:0; text-align:left;
  background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  transition:border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.trabalho-gallery__media{
  position:relative; display:block; aspect-ratio:4/5; overflow:hidden;
  background:radial-gradient(85% 70% at 50% 38%, #FDFCF9 0%, #ECEAE4 62%, #E2E0D9 100%);
}
.trabalho-gallery__media img{
  position:absolute; inset:0; margin:auto; width:auto; height:auto;
  max-width:calc(100% - 2.75rem); max-height:calc(100% - 2.75rem);
  border-radius:8px;
  filter:drop-shadow(0 18px 28px rgba(10,10,10,.20)) drop-shadow(0 3px 6px rgba(10,10,10,.10));
  transition:transform .35s var(--ease);
}
.trabalho-gallery__media--empty{
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-dim); border-bottom:1px dashed var(--gray-400);
}
.trabalho-gallery__media--empty svg{ width:34px; height:34px; fill:none; stroke:var(--gray-400); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.trabalho-gallery__caption{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.9rem 1rem .95rem; border-top:1px solid var(--line);
  font-family:var(--font-sans); font-size:.9rem; line-height:1.35; color:var(--ink-soft);
}
/* lupa: indica que dá pra ampliar */
.trabalho-gallery__zoom{
  flex-shrink:0; position:relative; width:26px; height:26px; border:1px solid var(--line); border-radius:50%;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.trabalho-gallery__zoom::before{
  content:''; position:absolute; left:7px; top:6px; width:8px; height:8px; border:1.5px solid var(--ink-soft); border-radius:50%;
}
.trabalho-gallery__zoom::after{
  content:''; position:absolute; left:15px; top:15px; width:5px; height:1.5px; background:var(--ink-soft); transform:rotate(45deg); transform-origin:left center;
}
.trabalho-gallery__tile--photo{ cursor:zoom-in; }
.trabalho-gallery__tile--photo:hover{ border-color:var(--gray-400); box-shadow:0 14px 34px rgba(10,10,10,.08); }
.trabalho-gallery__tile--photo:hover .trabalho-gallery__media img{ transform:translateY(-4px) scale(1.015); }
.trabalho-gallery__tile--photo:hover .trabalho-gallery__zoom{ border-color:var(--ink); }
.trabalho-gallery__tile--photo:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  .trabalho-gallery__media img{ transition:none; }
}

/* celular: carrossel com arraste, cada quadro quase na largura da tela */
@media (max-width:700px){
  .trabalho-gallery-section{ padding:64px 0; }
  .trabalho-gallery{
    display:flex; gap:.75rem; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gutter)); padding:0 var(--gutter) .75rem;
    scrollbar-width:none;
  }
  .trabalho-gallery::-webkit-scrollbar{ display:none; }
  .trabalho-gallery__tile{ flex:0 0 78%; scroll-snap-align:center; }
  .trabalho-gallery__media img{ max-width:calc(100% - 2rem); max-height:calc(100% - 2rem); }
  .trabalho-gallery__caption{ font-size:.86rem; padding:.8rem .9rem; }
}


/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0; transition:opacity .2s var(--ease), visibility .2s;
}
.lightbox.is-open{ visibility:visible; opacity:1; }
.lightbox__backdrop{ position:absolute; inset:0; background:rgba(10,10,10,.93); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.lightbox__figure{ position:relative; z-index:1; max-width:min(90vw,1100px); max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:1rem; margin:0; }
.lightbox__img{ max-width:100%; max-height:76vh; object-fit:contain; border-radius:var(--radius); }
.lightbox__caption{ font-family:var(--font-mono); font-size:.85rem; color:var(--dark-text-dim); text-align:center; }
.lightbox__close{
  position:absolute; top:20px; right:24px; z-index:2; font-size:1.8rem; line-height:1; color:var(--dark-text);
}
.lightbox__close:hover{ color:var(--dark-text-dim); }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; font-size:1.6rem;
  color:var(--dark-text); padding:.5rem 1rem;
}
.lightbox__nav:hover{ color:var(--dark-text-dim); }
.lightbox__nav--prev{ left:8px; }
.lightbox__nav--next{ right:8px; }
.lightbox__nav[hidden]{ display:none; }

@media (max-width:700px){
  .lightbox__nav{ font-size:1.3rem; padding:.4rem .7rem; }
  .lightbox__close{ top:12px; right:16px; }
}

/* ---------- detail ---------- */
.trabalho-detail-section{ padding:90px 0; border-bottom:1px solid var(--line); }
@media (max-width:640px){ .trabalho-detail-section{ padding:64px 0; } .trabalho-entregas{ margin-top:2rem; } .trabalho-cta{ padding:64px 0; } }
.trabalho-detail{ display:grid; grid-template-columns:1.4fr 1fr; gap:3rem; align-items:start; }
.trabalho-summary{ font-family:var(--font-display); font-size:clamp(1.2rem,2.2vw,1.5rem); line-height:1.4; margin-bottom:1.25rem; }
.trabalho-body{ color:var(--gray-600); font-size:1rem; max-width:60ch; }
.trabalho-metric{
  font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--ink);
  border-left:2px solid var(--ink); padding-left:1rem; align-self:start;
}
@media (max-width:800px){
  .trabalho-detail{ grid-template-columns:1fr; }
}

/* uma entrega por serviço, todas com o mesmo peso */
.trabalho-entregas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:3rem;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.trabalho-entregas[hidden]{ display:none; }
.trabalho-entrega{ padding:1.6rem 1.5rem 1.75rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); }
.trabalho-entrega h3{
  display:inline-block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--ink); border-radius:100px; padding:.3em .8em; margin-bottom:.9rem;
}
.trabalho-entrega p{ font-size:.93rem; color:var(--ink-soft); max-width:46ch; }

/* ---------- aplicativo: parte do trabalho, com zoom interativo ----------
   Um quadro 4:3 mostra de perto uma parte da tela do app; o celular
   pequeno no canto marca qual parte é. Os recursos ao lado trocam o
   zoom (sozinhos a cada 5s, ou quando a pessoa toca). */
.app-part{ padding:90px 0; border-bottom:1px solid var(--line); }
.app-part[hidden]{ display:none; }
.app-part__head{ max-width:640px; margin-bottom:2.25rem; }
.app-part__title{ max-width:none; }
.app-part__lead{ color:var(--gray-600); font-size:1rem; max-width:58ch; }

.app-tour{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.app-tour__stage{ grid-column:2; grid-row:1; width:100%; max-width:540px; justify-self:end; }
.app-tour__frame{ position:relative; }
.app-tour__tabs{ grid-column:1; grid-row:1; display:flex; flex-direction:column; border-top:1px solid var(--line); }

.app-tour__zoom{
  position:relative; display:block; width:100%; aspect-ratio:4/3; overflow:hidden; cursor:zoom-in;
  background:#0B0C0E; border-radius:10px; border:1px solid var(--ink);
  box-shadow:0 22px 50px rgba(10,10,10,.22);
}
.app-tour__zoom-img{
  position:absolute; top:0; left:0; width:775px; max-width:none; height:auto;
  transform-origin:0 0; transition:transform .9s cubic-bezier(.65,0,.35,1); will-change:transform;
}
.app-tour__zoom:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.app-tour__mini{
  position:absolute; right:-14px; bottom:-18px; width:84px; pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(10,10,10,.45));
}
.app-tour__mini img{ width:100%; height:auto; display:block; }
.app-tour__spot{
  position:absolute; border:1.5px solid #F1F0EC; border-radius:3px;
  box-shadow:0 0 0 999px rgba(10,10,10,.28) inset;
  transition:left .9s cubic-bezier(.65,0,.35,1), top .9s cubic-bezier(.65,0,.35,1);
}
.app-tour__hint{ margin-top:.85rem; font-size:.8rem; color:var(--gray-600); }

.app-tour__tab{
  position:relative; display:flex; flex-direction:column; justify-content:flex-start; width:100%; text-align:left; padding:1rem 1rem 1rem 1.1rem;
  border-bottom:1px solid var(--line); border-left:2px solid transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.app-tour__tab strong{ display:block; font-family:var(--font-display); font-size:1rem; margin-bottom:.2rem; color:var(--gray-600); transition:color .2s; }
.app-tour__tab span:not(.app-tour__bar){ display:block; font-family:var(--font-sans); font-size:.88rem; color:var(--gray-600); line-height:1.45; }
.app-tour__tab:hover strong{ color:var(--ink); }
.app-tour__tab.is-active{ background:var(--paper-dim); border-left-color:var(--ink); }
.app-tour__tab.is-active strong{ color:var(--ink); }
.app-tour__tab.is-active span:not(.app-tour__bar){ color:var(--ink-soft); }
.app-tour__tab:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
/* barrinha de tempo até trocar sozinho */
.app-tour__bar{ position:absolute; left:-2px; top:0; width:2px; height:0; background:var(--gray-400); }
.app-tour__tab.is-timing .app-tour__bar{ animation:tourbar 5s linear forwards; }
@keyframes tourbar{ from{ height:0; } to{ height:100%; } }
.app-tour.is-manual .app-tour__bar{ display:none; }
.app-tour.is-resizing .app-tour__zoom-img{ transition:none; }

@media (prefers-reduced-motion: reduce){
  .app-tour__zoom-img, .app-tour__spot{ transition:none; }
}

/* celular: zoom em cima, recursos em 2x2 embaixo */
@media (max-width:760px){
  .app-part{ padding:64px 0; }
  .app-part__head{ margin-bottom:1.5rem; }
  .app-tour{ grid-template-columns:1fr; gap:1.4rem; }
  .app-tour__stage, .app-tour__tabs{ grid-column:1; grid-row:auto; }
  .app-tour__stage{ max-width:none; }
  .app-tour__mini{ width:54px; right:8px; bottom:8px; }
  .app-tour__hint{ font-size:.76rem; }
  .app-tour__tabs{ display:grid; grid-template-columns:repeat(2,1fr); border-top:none; gap:.5rem; }
  .app-tour__tab{ border:1px solid var(--line); border-radius:6px; padding:.8rem .8rem .85rem; overflow:hidden; background:var(--paper); }
  .app-tour__tab.is-active{ border-color:var(--ink); background:var(--paper-dim); }
  .app-tour__tab strong{ font-size:.88rem; }
  .app-tour__tab span:not(.app-tour__bar){ font-size:.76rem; }
  .app-tour__bar{ left:0; top:auto; bottom:0; height:2px; width:0; background:var(--ink); }
  .app-tour__tab.is-timing .app-tour__bar{ animation:tourbarx 5s linear forwards; }
  @keyframes tourbarx{ from{ width:0; } to{ width:100%; } }
}

/* ---------- closing CTA ---------- */
.trabalho-cta{ padding:90px 0; }
.trabalho-cta__inner{ display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }
.trabalho-cta__title{ margin-bottom:.4rem; max-width:20ch; }
.trabalho-cta__lead{ margin-bottom:0; }
.trabalho-cta__actions{ display:flex; gap:.75rem; flex-wrap:wrap; }

@media (max-width:700px){
  .trabalho-cta__inner{ text-align:center; flex-direction:column; }
  .trabalho-cta__actions{ width:100%; }
  .trabalho-cta__actions .btn{ flex:1; justify-content:center; }
}