/* "Todos nuestros trabajos": cinta lateral infinita + buscador */
.todos { max-width: 1280px; margin: 0 auto; padding: clamp(64px, 9vw, 120px) clamp(16px, 5vw, 64px) clamp(40px, 6vw, 70px); text-align: center; }
.todos-head h2 { margin-top: 6px; }
.todos-search {
  display: flex; align-items: center; gap: 10px;
  width: min(560px, 100%); margin: 28px auto 8px; padding: 7px 7px 7px 18px; border-radius: 99px;
  background: rgba(255, 255, 255, .92); color: #050506;
  box-shadow: 0 16px 40px -14px rgba(217, 220, 225, .6), inset 0 0 0 1px rgba(255, 255, 255, .8);
}
.todos-search > svg { flex: none; width: 19px; height: 19px; }
.todos-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 16px var(--sans); color: #050506; text-shadow: none; }
.todos-search input::placeholder { color: #7c8088; }
.todos-search button { flex: none; border: 0; cursor: pointer; padding: 11px 20px; border-radius: 99px; background: #050506; color: #d9dce1; font: 600 14px var(--sans); text-shadow: none; }
.todos-msg { min-height: 18px; margin: 0 0 18px; font: 12px var(--mono); color: var(--muted); }

.todos-loop {
  overflow: hidden; margin: 0 calc(-1 * clamp(16px, 5vw, 64px)); padding: 8px 0 14px;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.todos-loop.dragging { cursor: grabbing; }
.todos-track { list-style: none; margin: 0; padding: 0 12px; display: flex; gap: 22px; width: max-content; will-change: transform; }
.todos-loop.static { cursor: default; -webkit-mask-image: none; mask-image: none; }
.todos-loop.static .todos-track { width: auto; flex-wrap: wrap; justify-content: center; }

.todo { flex: none; width: clamp(150px, 13vw, 190px); text-align: left; }
.todo a { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.todo-phone {
  display: block; position: relative; margin-bottom: 8px; border: 5px solid #020203; border-radius: 24px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(217, 220, 225, .25), 0 20px 40px -16px rgba(0, 0, 0, .9);
  transition: transform .3s, box-shadow .3s;
}
.todo-phone::before { content: ""; position: absolute; top: 6px; left: 50%; translate: -50% 0; z-index: 1; width: 34%; height: 9px; border-radius: 9px; background: #000; }
.todo-phone img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 19; object-fit: cover; object-position: top; pointer-events: none; }
.todo b { font: 600 15px/1.2 var(--serif); color: #fff; }
.todo small { font-size: 12px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .todo a:hover .todo-phone { transform: translateY(-6px); box-shadow: 0 0 0 2px #d9dce1, 0 30px 50px -18px rgba(217, 220, 225, .45); } }
.todos-hint { margin-top: 10px; font: 12px var(--mono); color: var(--muted); opacity: .7; }
@media (max-width: 640px) { .todo { width: 40vw; } .todos-track { gap: 14px; } }