/* Antes y después: comparador deslizable (home y trabajos.html). */

/* ---------- comparador ---------- */
.ba{--pos:50%;position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:18px;background:var(--rose);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;isolation:isolate}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba .tag{top:14px;transition:opacity .35s}
.ba .tag-before{left:14px;background:rgba(247,241,236,.92)}
.ba .tag-after{left:auto;right:14px;background:var(--accent);color:#fff}
/* la etiqueta se apaga cuando su foto queda casi tapada */
.ba[data-side=after] .tag-before,.ba[data-side=before] .tag-after{opacity:0}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:2;outline:none}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-.5px;width:1px;background:rgba(247,241,236,.9);box-shadow:0 0 12px rgba(43,31,26,.25)}
.ba-knob{position:absolute;top:50%;left:0;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;border:1px solid rgba(247,241,236,.9);background:rgba(43,31,26,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--cream);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(43,31,26,.22);transition:transform .45s var(--ease),background .3s,border-color .3s}
.ba-knob svg{width:30px;height:14px;overflow:visible}
.ba:hover .ba-knob,.ba.dragging .ba-knob{transform:scale(1.08);background:rgba(43,31,26,.3)}
.ba-handle:focus-visible .ba-knob{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(247,241,236,.85),0 10px 30px rgba(43,31,26,.25)}
.ba-case{display:flex;flex-direction:column;gap:14px;min-width:0}
.ba-case figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px}
.ba-case figcaption span{font:21px/1.2 var(--serif)}
.ba-case figcaption small{font:500 10.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:right}
.ba-case.in{animation:ba-in .6s var(--ease) both}
@keyframes ba-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- sección de la home ---------- */
.ad{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center;padding-top:clamp(10px,3vh,40px)}
.ad-text{display:flex;flex-direction:column;gap:22px;max-width:480px}
.ad-text .lead{max-width:420px}
.ad-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ad-stage{display:grid;min-width:0}
.ad-stage>.ba-case{grid-area:1/1}
.ad-stage>.ba-case[hidden]{display:none}
.ad-stage .ba{border-radius:22px}
.ad-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:6px}
.ad-ctas .link-line,.gal-more .link-line{align-self:center}
@media (min-width:900px){
  .ad{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}
/* en móvil: título, comparador y después las pestañas y el botón */
@media (max-width:899px){
  .ad-text{display:contents}
  .ad-head{order:1}.ad-stage{order:2}.ad-tabs{order:3;margin-top:-8px}.ad-ctas{order:4;margin-top:-6px}
}

/* ---------- galería: enlace a la página de trabajos ---------- */
.gal-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 28px}

/* ---------- página de trabajos ---------- */
.tj-hero{padding:clamp(130px,20vh,190px) var(--gut) clamp(40px,6vh,72px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px clamp(40px,6vw,100px)}
.tj-hero .stack{max-width:760px}
.tj-hero .lead{max-width:440px}
.crumbs{display:flex;gap:10px;font:500 11px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.tj-hero-side{display:flex;flex-direction:column;gap:22px;max-width:420px}
.tj-stats{display:flex;gap:34px}
.tj-stats div{display:flex;flex-direction:column;gap:6px}
.tj-stats b{font:300 clamp(40px,4vw,56px)/1 var(--serif)}
.tj-stats span{font:500 10.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

.tj-sec{display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}
.tj-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;border-top:1px solid var(--line);padding-top:22px}
.tj-sec-head h2{font:300 clamp(34px,4vw,56px)/1 var(--serif)}
.tj-sec-head p{max-width:420px;font:300 15px/1.6 var(--sans);color:var(--ink-3);text-wrap:pretty}
.tj-cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:clamp(36px,4vw,56px) clamp(20px,3vw,40px)}
.tj-cases .ba-case figcaption span b{font:500 11px/1 var(--sans);letter-spacing:.16em;color:var(--accent);margin-right:12px;vertical-align:.3em}
.tj-cases .ba-case p{font:300 14.5px/1.6 var(--sans);color:var(--ink-3);margin-top:-4px;text-wrap:pretty}

.tj-grid{columns:3 300px;column-gap:clamp(14px,2vw,28px)}
.tj-grid .gitem{break-inside:avoid;margin-bottom:clamp(22px,2.6vw,36px)}
.tj-grid .gitem.in{animation:ba-in .7s var(--ease) both}

.tj-cta{background:var(--ink);color:var(--on-dark);border-radius:clamp(24px,4vw,56px) clamp(24px,4vw,56px) 0 0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:36px 60px}
.tj-cta .eyebrow{color:var(--on-dark-3)}
.tj-cta em{color:var(--accent-lt)}
.tj-cta .lead{color:var(--on-dark-2);max-width:420px}
.tj-cta-actions{display:flex;flex-wrap:wrap;gap:14px}
.tj-cta .btn-ghost{border-color:rgba(243,233,226,.4);color:var(--on-dark)}
.tj-cta .btn-ghost:hover{background:var(--on-dark);color:var(--ink)}
.tj-cta+.foot{padding-top:clamp(20px,4vh,40px)}
.nav-links a[aria-current]:not(.btn){color:var(--accent)}
.menu a[aria-current]{color:var(--accent-lt)}

@media (prefers-reduced-motion:reduce){
  .ba-case.in,.tj-grid .gitem.in{animation:none}
}